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

 

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