获取
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
时间： 2024-12-25 02:11:54