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

时间：2014-05-05 11:09:12 收藏：0 阅读：493

获取

tBodies、tHead、tFoot、rows、cells

隔行变色

鼠标移入高亮

添加、删除一行

DOM方法的使用

添加、删除

  1 <script>
  2 window.onload=function (){
  3 /*var str=‘abcdef‘;
  4 alert(str.search(‘g‘));    //找到并且返回字符串出现的位置，如果没找到-1
  5 */
  6 /*
  7 var str=‘abc 123 ert‘;
  8 var arr=str.split(‘ ‘);
  9 alert(arr);
 10 */
 11     /*var oTab=document.getElementById(‘tab1‘);
 12     //alert(oTab.getElementsByTagName(‘tbody‘)[0].getElementsByTagName(‘tr‘)[1].getElementsByTagName(‘td‘)[1].innerHTML);
 13     alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);*/
 14 
 15 //表格隔行变色
 16     var oTab=document.getElementById(‘tab1‘);
 17     //alert(oTab.rows.length);
 18     for(var i=0;i<oTab.tBodies[0].rows.length;i++)
 19     {
 20         if(i%2==1){ oTab.tBodies[0].rows[i].style.background=‘‘; }
 21         else{oTab.tBodies[0].rows[i].style.background=‘#ccc‘;  }    
 22         //鼠标经过时颜色的改变
 23         oTab.tBodies[0].rows[i].onmouseover=function ()
 24         {   
 25             oBgColor=this.style.background;
 26             this.style.background=‘green‘;
 27         }
 28         oTab.tBodies[0].rows[i].onmouseout=function ()
 29         {
 30             this.style.background=oBgColor;
 31         }
 32             
 33     }
 34    // 增加，删除
 35    var  oBtn=document.getElementById(‘btn1‘);
 36    var  oName=document.getElementById(‘name‘);
 37    var  oAge=document.getElementById(‘age‘);
 38    var  id=oTab.tBodies[0].rows.length+1;
 39    oBtn.onclick=function ()
 40    {
 41         var oTr = document.createElement(‘tr‘);
 42         
 43         var oTd=document.createElement(‘td‘);
 44         oTd.innerHTML=id++    //oTab.tBodies[0].rows.length+1;//添加 ID 
 45         oTr.appendChild(oTd);  
 46    
 47         var oTd=document.createElement(‘td‘);
 48         oTd.innerHTML=oName.value;
 49         oTr.appendChild(oTd);
 50    
 51         var oTd=document.createElement(‘td‘);
 52         oTd.innerHTML=oAge.value;
 53         oTr.appendChild(oTd);
 54         
 55         var oTd=document.createElement(‘td‘);
 56         oTd.innerHTML=‘<a href="javascript:;">删除</a>‘;
 57         oTr.appendChild(oTd);
 58         oTd.getElementsByTagName(‘a‘)[0].onclick=function ()
 59         {
 60              oTab.tBodies[0].removeChild(this.parentNode.parentNode);    
 61         }
 62         
 63         oTab.tBodies[0].appendChild(oTr);
 64    }
 65    
 66    
 67 
 68 
 69 }
 70 </script>
 71 </head>
 72 
 73 <body>
 74 姓名：<input id="name" type="text" />
 75 年龄：<input id="age" type="text" />
 76 <input id="btn1" type="button" value="添加" />
 77 
 78 
 79 <table  id="tab1" border="1" width="500">
 80 
 81    <thead> <td> ID</td>
 82        <td> 姓名</td>
 83         <td> 年龄</td>
 84         <td>操作</td>
 85    </thead>
 86    <tbody>
 87    <tr>
 88       <td> 2</td>
 89        <td> Mrs.Jimmy</td>
 90         <td> 17</td>
 91         <td></td>
 92    </tr>
 93    
 94    <tr>
 95       <td> 3</td>
 96        <td> 张三</td>
 97         <td> 27</td><td></td>
 98    </tr>
 99    
100    <tr>
101       <td> 1</td>
102        <td> 李斯</td>
103         <td> 32</td><td></td>
104    </tr>
105    
106     <tr>
107       <td> 4</td>
108        <td> 李四</td>
109         <td> 12</td><td></td>
110    </tr>
111    
112     <tr>
113       <td> 5</td>
114        <td> Mr.ZhiNiao</td>
115         <td> 12</td><td></td>
116    </tr>
117    
118    </tbody>
119 
120 </table>
121 </body>

搜索

版本1：基础版本——字符串比较

版本2：忽略大小写——toLowerCase大小写转换

版本3：模糊搜索——search的使用

版本4：多关键词——split

 1 <script>
 2 window.onload=function (){
 3  
 4        var oTab=document.getElementById(‘tab1‘);
 5     var oTxt=document.getElementById(‘name‘);
 6     var oBtn=document.getElementById(‘btn1‘);
 7     oBtn.onclick=function ()
 8     {
 9        for(var i=0;i<oTab.tBodies[0].rows.length;i++)
10         {
11             var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();//toLowerCase()函数忽略大小
12             var sTxt=oTxt.value.toLowerCase();
13             //alert(sTab.search(sTxt));//search 匹配到模糊字段，打印为 0 ，没有匹配为 -1
14         /*    if(sTab.search(sTxt)!=-1)
15             {
16                 oTab.tBodies[0].rows[i].style.background=‘yellow‘;
17             }
18             else
19             {
20                 oTab.tBodies[0].rows[i].style.background=‘‘;
21             }
22         */
23             //多关键字筛选
24             //var str = ‘abc c her‘;
25             //alert(str.split(‘ ‘));
26             var arr=sTxt.split(‘ ‘);//分隔带空格的字符串
27             oTab.tBodies[0].rows[i].style.background=‘‘;
28             for(var j=0;j<arr.length;j++)
29              {
30                   if(sTab.search(arr[j])!=-1)
31                   {
32                       oTab.tBodies[0].rows[i].style.background=‘yellow‘;
33                       }
34              }
35         }
36 
37     }
38 
39 }
40 </script>
41 </head>
42 
43 <body>
44 姓名：<input id="name" type="text" />
45 <input id="btn1" type="button" value="搜索" />
46 
47 <table  id="tab1" border="1" width="500">
48 
49    <thead> 
50         <td> ID</td>
51         <td>姓名</td>
52         <td> 年龄</td>
53         <td>操作</td>
54    </thead>
55    <tbody>
56      <tr>
57         <td> 2</td>
58         <td>Mrs.Jimmy</td>
59         <td> 17</td>
60         <td></td>
61      </tr>
62    
63      <tr>
64         <td> 3</td>
65         <td>张三</td>
66         <td> 27</td><td></td>
67      </tr>
68    
69      <tr>
70        <td> 1</td>
71         <td>李斯</td>
72         <td> 32</td><td></td>
73      </tr>
74    
75      <tr>
76         <td> 4</td>
77         <td>李四</td>
78         <td> 12</td><td></td>
79      </tr>
80    
81      <tr>
82        <td> 5</td>
83        <td>Mr.ZhiNiao</td>
84        <td> 12</td><td></td>
85      </tr>
86    
87    </tbody>
88 
89 </table>
90 </body>

Javascript DOM 03 表格添加、删除 + 搜索,布布扣,bubuko.com