获取
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. C语言(2)--数据类型

    C语言中提供多种不同的数据类型,用以存放不同的数据. 1.常见的基本类型有:int-->整型 float-->浮点型 double-->双精度浮点型 char-->字符型 NO ...

  2. Anatomy of a Program in Memory

    Memory management is the heart of operating systems; it is crucial for both programming and system a ...

  3. MVC-07 案例2

    二.电子商务网站 掌握该网站的开发流程和设计思路,并为数据模型中商品.商品分类,这两个类编写代码. 1.需求分析 2.数据模型规划 (1)商品类别 (2)商品信息 (3)会员信息 (4)购物车项目 ( ...

  4. sql语法复习：增删查改,各种数据库对象创建和函数使用

    推荐工具:机子配置较低的话,可以装Gsql这个工具获得sql执行环境(可作为手册查看内置数据类型 函数和存储过程等) --之前数据库的东西接触不多,虽然基本的语法是了解,但不是很熟悉--最近项目一直在 ...

  5. perl unicode utf-8 \x转换

    [root@dr-mysql01 ~]# cat x5.pl use Encode; use JSON; use URI::Escape; use LWP::Simple; my $host = &q ...

  6. java 面试 复习 II

    1  break  多重 循环跳出当前循环到上层循环再执行. 如若想跳出多重循环可以使用标号 2  byte,short,char都可以隐含转换为int.可以用在switch 表达式.long和str ...

  7. VS2010/MFC设置对话框控件的Tab顺序

    设置对话框控件的Tab顺序 前面几节为大家演示了加法计算器程序完整的编写过程,本节主要讲对话框上控件的Tab顺序如何调整. 上一讲为“计算”按钮添加了消息处理函数后,加法计算器已经能够进行浮点数的加法 ...

  8. [Python]Unicode转ascii码的一个好方法

    写这篇文章的是一位外国人,他遇到了什么问题呢?比如有一个 Unicode 字符串他需要转为 ascii码: >>> title = u"Klüft skräms inför ...

  9. Oracle表解锁

    网搜 --第一步 查看被锁表 select b.owner,b.object_name, b.object_id,l.session_id,l.locked_mode from v$locked_ob ...

  10. java的for循环问题的解决，以及安卓中ListView插入数据的问题

    package test.testdemo; import org.springframework.jdbc.core.JdbcTemplate; import com.util.Pub; publi ...