1.表格的更加与删除

<!DOCTYPE html>

<html>

<head>

    <title>表格操作</title>

     <style type="text/css">

        table{

            border: 1px solid black;

        }

        tr td{

            border: 1px solid black;

            width: 50px;

        }

    </style>

</head>

<body>

    <input type="text" placeholder="年龄" id="age">

    <input type="text" placeholder="姓名" id="uname">

    <button type="button" id="add">增加</button>

    <input type="text" placeholder="输入ID号" id="userId">

    <button type="button" id="del">删除</button>

   <table>

       <thead>

           <tr>

                <td>ID</td>

               <td>姓名</td>

               <td>年龄</td>

               <td>操作</td>

           </tr>

       </thead>

       <tbody>

           <tr>

           <td>1</td>

               <td>张三</td>

               <td>22</td>

               <td><a href="javascript:void(0);">删除</a></td>

           </tr>

           <tr>

                <td>2</td>

               <td>李四</td>

               <td>20</td>

               <td><a href="javascript:void(0);">删除</a></td>

           </tr>

           <tr>

                <td>3</td>

               <td>小王</td>

               <td>11</td>

               <td><a href="javascript:void(0);">删除</a></td>

           </tr>

       </tbody>

   </table>

</div>

<script type="text/javascript">

    var uname = document.getElementById('uname');

    var age = document.getElementById('age');

    var oAdd = document.getElementById('add');

    var oDels = document.getElementsByTagName('a');

    var oTab = document.getElementsByTagName('table')[0];

    var oDel = document.getElementById('del');

    var uid = document.getElementById('userId');

    var num = oTab.tBodies[0].rows.length;

    oAdd.onclick = function (){

        var oTr = document.createElement('tr');

        var info = new Array();

        info.push(++num);

        info.push(uname.value);

        info.push(age.value);

        info.push("<a href='javascript:void(0);'>删除</a>");

        var len = info.length;

        for(var i=0; i<len;i++){

            var oTd = document.createElement('td');

            oTd.innerHTML = info.shift();

            oTr.appendChild(oTd);

        }

        oTab.tBodies[0].appendChild(oTr);

        for(var i=0; i<oDels.length; i++){

            var del = oDels[i];

            del.onclick = function (){

                oTab.tBodies[0].removeChild(this.parentNode.parentNode);

            }

        }

    }

    for(var i=0; i<oDels.length; i++){

        var del = oDels[i];

        del.onclick = function (){

            oTab.tBodies[0].removeChild(this.parentNode.parentNode);

        }

    }

    oDel.onclick = function (){

        var id = uid.value;

        var rows = oTab.tBodies[0].rows;

        for(var i=0; i<rows.length; i++){

            if(id == rows[i].cells[0].innerHTML){

                 var parent = rows[i].cells[0].parentNode;

                 parent.parentNode.removeChild(parent);

                 return;

            }

        }

    }

</script>

</body>

</html>

2.鼠标控制每行变色

<!DOCTYPE html>

<html>

<head>

    <title>表格操作</title>

     <style type="text/css">

        table{

            border: 1px solid black;

        }

        tr td{

            border: 1px solid black;

            width: 50px;

        }

    </style>

</head>

<body>

   <table>

       <thead>

           <tr>

                <td>ID</td>

               <td>姓名</td>

               <td>年龄</td>

           </tr>

       </thead>

       <tbody>

           <tr>

           <td>1</td>

               <td>张三</td>

               <td>22</td>

           </tr>

           <tr>

                <td>2</td>

               <td>李四</td>

               <td>20</td>

           </tr>

           <tr>

           <td>3</td>

               <td>小王</td>

               <td>11</td>

           </tr>

       </tbody>

   </table>

</div>

<script type="text/javascript">

    var oTab = document.getElementsByTagName('table')[0];

    var oRows = oTab.tBodies[0].rows;

    for(var i=0; i<oRows.length; i++){

        oRows[i].style.background = "#DCDCDC";

        oRows[i].onmouseover = function (){

            this.style.background = "gray";

        }

        oRows[i].onmouseout = function (){

            this.style.background = "#DCDCDC";

        }

    }

</script>

</body>

</html>

3.字符串大小写转换

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<script type="text/javascript">

  var str = "AbCd";

  alert(str.toUpperCase());

  alert(str.toLowerCase());

</script>

</body>

</html>

4.模糊搜索

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<script type="text/javascript">

  var str = "AbCdef";

  //查找时区分大小写,若找到则返回子串的起始位置，否则返回-1

  if(str.search("bC") != -1){

    alert("find out");

  }

</script>

</body>

</html>

5.字符串分割

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<script type="text/javascript">

  var str = "AbCdef 张 小";

  //查找时区分大小写,若找到则返回子串的起始位置，否则返回-1

  var strEles = str.split(' ');

  for(var i=0; i<strEles.length; i++){

    alert(strEles[i]);

  }

</script>

</body>

</html>

6.列表排序

<!DOCTYPE html>

<html>

<head>

<title>列表排序</title>

</head>

<body>

<button type="button" id="sort">排序</button>

<ul>

    <li>13</li>

    <li>2</li>

    <li>5</li>

    <li>4</li>

</ul>

<script type="text/javascript">

    var oUl = document.getElementsByTagName('ul')[0];

    //返回所有li元素集合(全是对象引用)

    var oLis = oUl.getElementsByTagName('li');

    var arr = new Array();

    for(var i=0; i<oLis.length; i++){

        arr.push(oLis[i]);

    }

    //调整数组中引用的顺序

    arr.sort(function(li1, li2){

        var num1 = parseInt(li1.innerHTML);

        var num2 = parseInt(li2.innerHTML);

        return num1 - num2;

    });

    var oBtn = document.getElementById('sort');

    oBtn.onclick = function (){

        for(var i=0; i<oLis.length; i++){

            //如果子节点中有相同的引用,则先将引用删除，再将新的添加到尾部

            oUl.appendChild(arr[i]);

        }

    }

</script>

</body>

</html>

js中的DOM操作(2)的更多相关文章

  1. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  2. JS中的DOM操作和事件

    [DOM树节点] DOM节点分为三大类: 元素节点. 属性节点. 文本节点: 文本节点.属性节点属于元素节点的子节点.操作时,均需要先取到元素节点,再操作子节点:可以使用getElement系列方法, ...

  3. React.js 小书 Lesson21 - ref 和 React.js 中的 DOM 操作

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson21 转载请注明出处,保留原文链接和作者信息. 在 React.js 当中你基本不需要和 DO ...

  4. ref 和 React.js 中的 DOM 操作

    在 React.js 当中你基本不需要和 DOM 直接打交道.React.js 提供了一系列的 on*方法帮助我们进行事件监听,所以 React.js 当中不需要直接调用 addEventListen ...

  5. JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

    DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元 ...

  6. js中的DOM操作(1)

    一.操作子节点 childNodes 通过该方式可以获取父节点下的所有子节点,但是由于浏览器的差异,这写节点中可能包含文本节点. <!DOCTYPE html> <html> ...

  7. 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】

    一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...

  8. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  9. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

随机推荐

  1. 字符串_KMP算法(求next[]模板 hdu 1711)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1711 问题描述:给两个序列a,b,长度分别为n,m(1<=n<=1000000,1< ...

  2. GMT与UTC简介

    一.简介 许多人都知道两地时间表简称为GMT或UTC,而世界时区表则通称为World Time ,那么GMT与UTC的实质原意又是为何?世界时区又是怎么区分的?面盘上密密麻麻的英文单字代表着什么意义与 ...

  3. Oracle中关于bitmap index的使用问题

    您如果熟悉 Oracle 数据库,我想您对 Thomas Kyte 的大名一定不会陌生. Tomas 主持的 asktom.oracle.com 网站享誉 Oracle 界数十年,绝非幸致.最近在图书 ...

  4. 浅析selenium的page object模式

    selenium目前比较流行的设计模式就是page object,那么到底什么是page object呢,简单来说,就是把页面作为对象,在使用中传递页面对象,来使用页面对象中相应的成员或者方法,能更好 ...

  5. 【读书笔记《Android游戏编程之从零开始》】3.Android 游戏开发常用的系统控件（Button、Layout、ImageButton）

    3.1 Button Button这控件不用多说,就是一个按钮,主要是点击后进行相应事件的响应. 给组件添加ID属性:定义格式为 android:id="@+id/name",这里 ...

  6. mac os下得pycharm怎么设置mercurial？

    捣鼓了一会儿,最终搞定了. 先把链接贴上来:https://www.jetbrains.com/pycharm/help/mercurial.html 如果你发现你的pycharm在设置mercuri ...

  7. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

  8. fastDFS 一二事 - 简易服务器搭建（单linux）

    什么是FastDFS FastDFS是一个叫余庆的哥们用c语言编写的一款开源的分布式文件系统 功能有冗余备份.负载均衡.线性扩容等,高可用.高性能 可以用FastDFS搭建一套高性能的文件服务器集群提 ...

  9. Ajax读取文件时出现的缓存问题

    对于Ajax缓存问题时,由于浏览器的版本问题,有时候当服务器端已更改文件中的内容,而客户端并得不到更新后的文件,而是延续之前的文件内容,解决办法是:在读取的文件内容后加一串的地址:JSON的格式为[{ ...

  10. MySQL数据库学习笔记（二）----MySQL数据类型

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...