获取
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. 利用fitnesse实现api接口自动化测试

    上午在园子里乱逛,看了不少小伙伴们分享的接口测试方面的知识,仔细想想,我做接口测试也有几个年头了,大家所叙述到的一些经验或多或少,我也曾遇到过,突然意识到知识的点滴积累是多么的重要,我记得我最早接触接 ...

  2. codeforces 374D. Inna and Sequence 线段树

    题目链接 给m个数, n个操作, 一个数列, 初始为空.一共有3种操作, 在数列末尾加0, 加1, 或删除位置为a[i]的数, a[i]为初始给的m个数, 如果a[i]大于数列长度, 那么什么也不发生 ...

  3. python安装集成包

    anaconda, 包含各种科学运算包以及astropy.装完它一劳永逸. https://www.continuum.io/downloads

  4. IOS 播放音频

    1,播放短音频 #import <AudioToolbox/AudioToolbox.h>#import "GLYViewController.h"static voi ...

  5. struts2 taglib struts标签学习整理中

    项目中经常会用到struts标签,这样可以减少代码量. select用法: <s:select list="#request.sysTypes" name="rul ...

  6. javascript 计算中文字符长度

    function getLength(str) {        var len = str.length;        var reLen = 0;        for (var i = 0; ...

  7. HDU 2451 Simple Addition Expression

    题目大意:有一个关于 简单加法表达式  的定义告诉你,就是  选一个数字i  如果 i+(i+1)+(i+2) 它的和,没有任何一位进位的话,那就是 一个i的简单加法表达式,求小于n的表达式数目. 题 ...

  8. asp.net Page_Load事件加载两次

    Page_Load 即使加上 if(!IsPostBack){ ……} 还时走了2次 这时候 或者看看你的程序和脚本,是不是刷新页面了 或者页面的样式有错误的地方  例如: background:ur ...

  9. openstack安装配置

    openstack:1.控制节点安装所有,计算节点只有nova-compute:2.网络选择: nova-network还是neutron: nova-network比较简单, neutron功能强大 ...

  10. mysqlcluster笔记

    1.config的datamemory和indexmemory规定的内存占有量会在ndb启动时直接占用掉,所以在计算内存时,这两个加起来要小于ndb的内存,这两个还只是数据和索引的内存,查询或者插入时 ...