使用JQuery实现表单的隔行变色，并对选定文本的数据显示高亮 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 5     <script>
 6         var flag = true;//这里设置一个按钮，点击的时候可以选择上色和不上色
 7         function changecolor () {
 8             console.log("调用了change")
 9             var tb1 = document.getElementById("tb1");
10             //获取表格中tbody的行数
11             var len = tb1.tBodies[0].rows.length;
12             //对tbody里面的行进行遍历
13             if (flag==true) {
14                 for (var i = 0; i < len; i++) {
15                     if (i % 2 == 0) {
16                         //对偶数行设置背景颜色
17                         tb1.tBodies[0].rows[i].style.backgroundColor = "grey";
18                     } else {
19                         //对奇数行设置背景颜色
20                         tb1.tBodies[0].rows[i].style.backgroundColor = "yellow";
21                     }
22                 }
23                 $("#tb1 tr:contains('长沙')").css("color","red");//这里采用jQuery的选择器对table里面的tr标签里带有“长沙”的进行着色
24             }else{
25                 for (var i = 0; i < len; i++) {
26                     if (i % 2 == 0) {
27                         //对偶数行设置背景颜色
28                         tb1.tBodies[0].rows[i].style.backgroundColor = "";
29                     } else {
30                         //对奇数行设置背景颜色
31                         tb1.tBodies[0].rows[i].style.backgroundColor = "";
32                     }
33                 }
34                 $("#tb1 tr:contains('长沙')").css("color","");
35             }
36             this.flag = !flag;
37         }
38     </script>
39 </head>
40 
41 <body>
42 
43 </body>
44 <table border="1" id="tb1">
45     <thead>
46         <tr>
47             <th>姓名</th>
48             <th>性别</th>
49             <th>暂住地</th>
50         </tr>
51     </thead>
52     <tbody>
53         <tr>
54             <td>张三</td>
55             <td>男</td>
56             <td>浙江宁波</td>
57         </tr>
58         <tr>
59             <td>李四</td>
60             <td>女</td>
61             <td>浙江杭州</td>
62         </tr>
63         <tr>
64             <td>王五</td>
65             <td>男</td>
66             <td>湖南长沙</td>
67         </tr>
68         <tr>
69             <td>赵六</td>
70             <td>男</td>
71             <td>浙江温州</td>
72         </tr>
73         <tr>
74             <td>Rain</td>
75             <td>男</td>
76             <td>浙江杭州</td>
77         </tr>
78         <tr>
79             <td>MAXMAN</td>
80             <td>女</td>
81             <td>浙江杭州</td>
82         </tr>
83     </tbody>
84 </table>
85 
86 <button onclick="changecolor()">表格按行间隔变色</button>
87 
88 </html>

 

 

posted @ 2021-03-18 10:42  MyNorth  阅读(490)  评论(0)    收藏  举报