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

获取

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 表格添加、删除 + 搜索的更多相关文章

JavaScript DOM方法表格添加删除
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...
JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
tab一些添加删除搜索
tab一些添加删除搜索案例 <!DOCTYPE html><html lang="en"><head> <meta charset ...
DOM给表格添加新一行和删除整个行的内容
DOM用appendChild()给表格添加新一行时,要注意,在HTML中没特别设置<thead>,<tbody>时,会自动添加上,所以要选择表格第一个元素在添加tr. // ...
JavaScript在div后添加删除div
var idd = 'str'; $('.task-done-detail-content-p7').click(function () { var id = this.id; if(idd !== ...
JavaScript 原生控制元素添加删除
参考: https://blog.csdn.net/leijie0322/article/details/80664554 https://www.cnblogs.com/jpfss/p/910620 ...
JQ DOM元素创建添加删除
创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); / ...
WPF下的Richtextbox中实现表格合并，添加删除行列等功能
.Net中已有现在的方法实现这些功能,不过可能是由于未完善,未把方法公开出来.只能用反射的方法去调用它. 详细信息可以查看.Net Framework 的源代码 http://referencesou ...
javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...

随机推荐

5.7.1.3 Global 对象的属性
Global对象还包含了一些属性,例如,特殊的值undefined.NaN以及Infinity都是Global对象的属性.此外,所有原生引用类型的构造函数,像Object和Function,也都是Gl ...
Python 安装、循环语句、数据类型(一)
一.关于版本的选择 Should i use Python 2 or Python 3 for my development activity?转载自Python官网 Short version: P ...
电脑cmos是什么？和bois的区别？
很多人都分不清电脑cmos和bois区别,有人一会儿说什么bois设置,有人一会儿说cmos设置.而看起来这两个又似乎差不多,本文将用最简单的白话文告诉各位,什么是cmos,以及cmos和bois的的 ...
关于DLL搜索路径顺序的一个问题
DLL的动态链接有两种方法.一种是加载时动态链接(Load_time dynamic linking).Windows搜索要装入的DLL时,按以下顺序:应用程序所在目录→当前目录→Windows SY ...
C++模板：二分图匹配
int Dfs(int k){ for(int i=0;i<v[k].size();i++){ int a=v[k][i]; if(used[a]==0){ used[a]=1; if(link ...
获取中央气象台API 完整城市列表简单方式
activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android& ...
innerText和innerHTML的区别
innerhtml用法 innertext用法以及innerHTML与innertext的区别,看完这个大家以后在实际应用中,就可以选择合适的方法.尽可能的考虑到兼容性. test.innerHTM ...
.Net将多个DLL打包为一个DLL(ILMerge)
在做.Net底层编码过程中,为了功能独立,有可能会生成多个DLL,引用时非常不便.这方面微软提供了一个ILMerge工具原版DOS工具,可以将多个DLL合并成一个.下载完成后需要安装一下,然后通过DO ...
SQL中distinct的用法(转)
原文:http://www.cnblogs.com/rainman/archive/2013/05/03/3058451.html 在表中,可能会包含重复值.这并不成问题,不过,有时您也许希望仅仅列出 ...
javascript mapping
1. 使用var定义的变量是声明,没有使用var是给window或者gloable对象增加属性. 比如var a = 10; //定义一个变量名称为a b= 20; // 给window对象增加一个属 ...

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

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

随机推荐

热门专题