获取
tBodies、tHead、tFoot、rows、cells
 
隔行变色
鼠标移入高亮
 
添加、删除一行
DOM方法的使用
 
                                                             添加、删除
 
 <script>

 window.onload=function (){

 /*var str='abcdef';

 alert(str.search('g'));    //找到并且返回字符串出现的位置，如果没找到-1

 */

 /*

 var str='abc 123 ert';

 var arr=str.split(' ');

 alert(arr);

 */

     /*var oTab=document.getElementById('tab1');

     //alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);

     alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);*/

 //表格隔行变色

     var oTab=document.getElementById('tab1');

     //alert(oTab.rows.length);

     for(var i=0;i<oTab.tBodies[0].rows.length;i++)

     {

         if(i%2==1){ oTab.tBodies[0].rows[i].style.background=''; }

         else{oTab.tBodies[0].rows[i].style.background='#ccc';  }

         //鼠标经过时颜色的改变

         oTab.tBodies[0].rows[i].onmouseover=function ()

         {

             oBgColor=this.style.background;

             this.style.background='green';

         }

         oTab.tBodies[0].rows[i].onmouseout=function ()

         {

             this.style.background=oBgColor;

         }

     }

    // 增加，删除

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

    var  oName=document.getElementById('name');

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

    var  id=oTab.tBodies[0].rows.length+1;

    oBtn.onclick=function ()

    {

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

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

         oTd.innerHTML=id++    //oTab.tBodies[0].rows.length+1;//添加 ID

         oTr.appendChild(oTd);  

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

         oTd.innerHTML=oName.value;

         oTr.appendChild(oTd);

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

         oTd.innerHTML=oAge.value;

         oTr.appendChild(oTd);

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

         oTd.innerHTML='<a href="javascript:;">删除</a>';

         oTr.appendChild(oTd);

         oTd.getElementsByTagName('a')[0].onclick=function ()

         {

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

         }

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

    }

 }

 </script>

 </head>

 <body>

 姓名：<input id="name" type="text" />

 年龄：<input id="age" type="text" />

 <input id="btn1" type="button" value="添加" />

 <table  id="tab1" border="1" width="500">

    <thead> <td> ID</td>

        <td> 姓名</td>

         <td> 年龄</td>

         <td>操作</td>

    </thead>

    <tbody>

    <tr>

       <td> 2</td>

        <td> Mrs.Jimmy</td>

         <td> 17</td>

         <td></td>

    </tr>

    <tr>

       <td> 3</td>

        <td> 张三</td>

         <td> 27</td><td></td>

    </tr>

    <tr>

       <td> 1</td>

        <td> 李斯</td>

         <td> 32</td><td></td>

    </tr>

     <tr>

       <td> 4</td>

        <td> 李四</td>

         <td> 12</td><td></td>

    </tr>

     <tr>

       <td> 5</td>

        <td> Mr.ZhiNiao</td>

         <td> 12</td><td></td>

    </tr>

    </tbody>

 </table>

 </body>

搜索

搜索
版本1：基础版本——字符串比较
版本2：忽略大小写——toLowerCase大小写转换 
版本3：模糊搜索——search的使用
版本4：多关键词——split
 
 <script>

 window.onload=function (){

        var oTab=document.getElementById('tab1');

     var oTxt=document.getElementById('name');

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

     oBtn.onclick=function ()

     {

        for(var i=0;i<oTab.tBodies[0].rows.length;i++)

         {

             var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();//toLowerCase()函数忽略大小

             var sTxt=oTxt.value.toLowerCase();

             //alert(sTab.search(sTxt));//search 匹配到模糊字段，打印为 0 ，没有匹配为 -1

         /*    if(sTab.search(sTxt)!=-1)

             {

                 oTab.tBodies[0].rows[i].style.background='yellow';

             }

             else

             {

                 oTab.tBodies[0].rows[i].style.background='';

             }

         */

             //多关键字筛选

             //var str = 'abc c her';

             //alert(str.split(' '));

             var arr=sTxt.split(' ');//分隔带空格的字符串

             oTab.tBodies[0].rows[i].style.background='';

             for(var j=0;j<arr.length;j++)

              {

                   if(sTab.search(arr[j])!=-1)

                   {

                       oTab.tBodies[0].rows[i].style.background='yellow';

                       }

              }

         }

     }

 }

 </script>

 </head>

 <body>

 姓名：<input id="name" type="text" />

 <input id="btn1" type="button" value="搜索" />

 <table  id="tab1" border="1" width="500">

    <thead>

         <td> ID</td>

         <td>姓名</td>

         <td> 年龄</td>

         <td>操作</td>

    </thead>

    <tbody>

      <tr>

         <td> 2</td>

         <td>Mrs.Jimmy</td>

         <td> 17</td>

         <td></td>

      </tr>

      <tr>

         <td> 3</td>

         <td>张三</td>

         <td> 27</td><td></td>

      </tr>

      <tr>

        <td> 1</td>

         <td>李斯</td>

         <td> 32</td><td></td>

      </tr>

      <tr>

         <td> 4</td>

         <td>李四</td>

         <td> 12</td><td></td>

      </tr>

      <tr>

        <td> 5</td>

        <td>Mr.ZhiNiao</td>

        <td> 12</td><td></td>

      </tr>

    </tbody>

 </table>

 </body>

Javascript DOM 03 表格添加、删除 + 搜索的更多相关文章

  1. JavaScript DOM方法表格添加删除

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  2. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  3. tab一些 添加 删除 搜索

    tab一些 添加 删除 搜索 案例 <!DOCTYPE html><html lang="en"><head> <meta charset ...

  4. DOM给表格添加新一行和删除整个行的内容

    DOM用appendChild()给表格添加新一行时,要注意,在HTML中没特别设置<thead>,<tbody>时,会自动添加上,所以要选择表格第一个元素在添加tr. // ...

  5. JavaScript在div后添加删除div

    var idd = 'str'; $('.task-done-detail-content-p7').click(function () { var id = this.id; if(idd !== ...

  6. JavaScript 原生控制元素添加删除

    参考: https://blog.csdn.net/leijie0322/article/details/80664554 https://www.cnblogs.com/jpfss/p/910620 ...

  7. JQ DOM元素 创建 添加 删除

    创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); / ...

  8. WPF下的Richtextbox中实现表格合并，添加删除行列等功能

    .Net中已有现在的方法实现这些功能,不过可能是由于未完善,未把方法公开出来.只能用反射的方法去调用它. 详细信息可以查看.Net Framework 的源代码 http://referencesou ...

  9. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

随机推荐

  1. 自己动手写 ASP.NET MVC 分页 part1

    学习编程也有一年半载了,从来没有自己动手写过东西,都是利用搜索软件找代码,最近偶发感慨,难道真的继续做码农??? 突发奇想是不是该自己动手写点东西,可是算法.逻辑思维都太弱了,只能copy网上的代码, ...

  2. 【转】DevExpress控件安装

    原文链接: DevExpress控件安装.汉化使用教程 - 田园里的蟋蟀 学习网址: 1.DevExpress控件中文网 2.DevExpress控件中文网使用教程 3.DevExpress控件使用经 ...

  3. Windows下Python中的中文路径和中文输出问题

    这几天有个项目需要写一点类似于脚本的小程序,就用Python写了,涉及到中文路径和中文输出的问题,整理一下. 有一个问题我觉得需要先强调一下,在写Python程序的时候,一定保证编码是utf-8,然后 ...

  4. SQL中采用Newtonsoft.Json处理json字符串

    原文 SQL中采用Newtonsoft.Json处理json字符串 使用环境: SQL Server2005; VS2010; 关于SQL中部署CLR程序集的方法,网上一搜一大把,需要了解的自行查阅, ...

  5. 导入jsp

    <%@ page contentType="text/html;charset=UTF-8" %><%@ page isELIgnored="false ...

  6. Flex XML搜索、匹配

    - <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx=" ...

  7. 【C++学习笔记】继承与派生基础概念

    面向对象的程序设计主要有四个特点:抽象.封装.继承和多态.其中继承是我认为最最重要的一个特性,可以说继承是面向对象的精华所在. 举一个继承的浅显易懂的例子:假如我们已经有了一个“马”的类,其中成员变量 ...

  8. Jedis中的一致性hash

    Jedis中的一致性hash 本文仅供大家参考,不保证正确性,有问题请及时指出 一致性hash就不多说了,网上有很多说的很好的文章,这里说说Jedis中的Shard是如何使用一致性hash的,也为大家 ...

  9. http://localhost:8080/ 演出Oracle说明

    输入http://localhost:8080,可以出现tomcat主页.并且我检查过啦,jdk.tomcat及oracle中的环境变量都设置对啦,可是安装oracle之后,再输入http://loc ...

  10. 道路软件质量：SourceMonitor

    有些事情必须这样做,不是幸福,但是,缓解疼痛,因为不.更痛苦--这是无奈. 夏中义 <文心独白> 1 简介 博客没有更新了一段时间,了阿里上市的成功之处:选择和坚持.事实上人生并没有绝对的 ...