获取
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>