表格的一些JS操作

ID 姓名 操作
1 abe  
2 a春春  
3 b一流  
4 贰万  
5 aaa  
6 blue   
  1 window.onload = function(){
  2     var tb = document.getElementById('tb');
  3     //alert(tb.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
  4     //alert(tb.tBodies[0].rows[1].cells[1].innerHTML);
  5 
  6 
  7     //表格隔行变色和鼠标滑过高亮
  8     var oldColor = ''; //保存原有的背景色
  9     for (var i=0;i<tb.tBodies[0].rows.length;i++) {
 10         tb.tBodies[0].rows[i].style.background = i%2 ? '#CCC': '';
 11 
 12         tb.tBodies[0].rows[i].onmouseover = function(){
 13             oldColor  = this.style.background;
 14             this.style.background = 'yellow';
 15         }
 16 
 17         tb.tBodies[0].rows[i].onmouseout = function(){
 18             this.style.background = oldColor;
 19         }
 20     };
 21 
 22 
 23     //添加和删除
 24     var oBtn = document.getElementById('btn1');
 25     var oTxt = document.getElementById('txt1');
 26     var iNowId =  tb.tBodies[0].rows.length+1;
 27     oBtn.onclick = function(){
 28         var oTr = document.createElement('tr');
 29         var oTd = null;
 30 
 31         oTd = document.createElement('td');
 32         oTd.innerHTML = iNowId++;
 33         oTr.appendChild(oTd);
 34 
 35         oTd  = document.createElement('td');
 36         if(oTd.innerHTML!=null || oTd.innerHTML!=""){
 37             oTd.innerHTML = oTxt.value;
 38         }
 39         oTr.appendChild(oTd);
 40 
 41         oTd = document.createElement('td');
 42         oTd.innerHTML ='<a href="javascript:void(0);">删除</a>';
 43         oTr.appendChild(oTd);
 44 
 45         oTd.getElementsByTagName('a')[0].onclick = function(){
 46             tb.tBodies[0].removeChild(this.parentNode.parentNode);
 47         }
 48 
 49         tb.tBodies[0].appendChild(oTr);
 50     }
 51 
 52     //搜索功能(应该算是精确搜索)
 53     var oBtn2 = document.getElementById('btn2');
 54     var oTxt2 = document.getElementById('txt2');
 55     oBtn2.onclick=function(){
 56         for(var i=0;i<tb.tBodies[0].rows.length;i++){
 57             var sValueInTb = tb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
 58             var sValueInTxt = oTxt2.value.toLowerCase().split(' ');
 59             if(sValueInTb==sValueInTxt){
 60                 tb.tBodies[0].rows[i].style.background = 'red';
 61             }
 62             else{
 63                 tb.tBodies[0].rows[i].style.background = '';
 64             }
 65         }
 66     }
 67 
 68     //试试
 69     var str = 'aaa blue';
 70     var arr = str.split(' ');
 71 
 72     var str2 = 'aaa is a person';
 73     var sFound = false;
 74     for(var i=0;i<arr.length;i++){
 75         if(str2.search(arr[i])!=-1){
 76             sFound = true;
 77         }
 78     }
 79     //alert(sFound);
 80 
 81 
 82     //搜索功能（模糊查询）
 83     var oBtn3 = document.getElementById('btn3');
 84     var oTxt2 = document.getElementById('txt2');
 85     oBtn3.onclick=function(){
 86         for(var i=0;i<tb.tBodies[0].rows.length;i++){
 87             var sValueInTb = tb.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
 88             var sValueInTxt = oTxt2.value.toLowerCase().split(' ');
 89             var sFound = false;
 90             for(var j=0;j<sValueInTxt.length;j++){
 91                 if(sValueInTb.search(sValueInTxt[j])!=-1){
 92                     sFound = true;
 93                     break;
 94                 }    
 95             }
 96             if(sFound){
 97                 tb.tBodies[0].rows[i].style.background = 'red';
 98             }
 99             else{
100                 tb.tBodies[0].rows[i].style.background = '';
101             }
102             
103         }
104     }
105 
106 }

 

posted @ 2015-07-10 11:50  miaomiaomiao  阅读(145)  评论(0)  编辑  收藏  举报