Javascript DOM 03 表格添加、删除 + 搜索

时间：2022-03-26 03:30:13
获取
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查找方法&semi; 设置DOM元素的样式&semi; innerHTML属性的应用&semi; className属性的应用&semi; DOM元素上添加删除获取属性&semi;

    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. &lbrack;python实现设计模式&rsqb;-2&period;模板方法模式---把大象关进冰箱&period;

    平时大家上班都很累,为了增加工作中的欢乐气氛,黄页组准备搞个游戏. 游戏的名字是把大象关进冰箱.游戏很简单,需要把指定的物品放进冰箱. 我们都知道,把大象放进冰箱,分3步. 第一步,打开冰箱门,第二步 ...

  2. 完全卸载VS2005或VS2008的步骤

    手动卸载步骤: Visual Studio Express Editions 进入控制面板,运行添加或删除程序  卸载 "MSDN Library for Visual Studio 200 ...

  3. C语言 文件操作12--文件加密

    //文件加密解密 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include ...

  4. XLSTransformer生成excel一个简单的演示示例文件

    项目结构图: 在这些项目中使用jar.可以http://www.findjar.com/index.x下载 ExcelUtil类源代码: package util; import java.io.IO ...

  5. Docker-py 的使用

    Docker SDK for Python A Python library for the Docker Engine API 具体文档这里,https://docker-py.readthedoc ...

  6. for循环语句以及输出语句

    action() { int  i;  //定义变量    lr_start_transaction("submit_answer");  //开始事物    for(i=0; i ...

  7. Android8&period;0通知

    android里面经常会使用Notification来显示通知的消息,一般使用NotificationManager来创建通知消息 NotificationManager manger = (Noti ...

  8. 吴恩达机器学习笔记5-Octave基本操作

    1.逻辑运算 1==2 %false :注释用%,这句话意思是判断1是否等于2,false,输出0 1~=2 %true  1不等于2 为true,输出为1 1&&0 %and 1|| ...

  9. 科学计算库Numpy（1）

    Numpy 一,数据结构 数据类型: ndarray import numpy world_alchol = numpy.genfromtxt('world_alchol.txt',delimiter ...

  10. DirectX之顶点法线的计算

    首先要明白,顶点法线存在的原因:确定灯光照射到物体表面的角度.所以一提到顶点法线,肯定要进行与灯光相关的运算了. 下面是顶点法线的计算方式 假如 A.B.C三个顶点构成一个三角形,它们对应的顶点法线分 ...

相关文章