JS实现页面table鼠标移动改变tr行颜色，单击tr选中复选框功能

JS源代码：

 1 //需要设置tr背景颜色
 2 var  highlightcolor='#bfecfc';
 3 
 4 //设置背景颜色
 5 function changeto(index){
 6     var tr1 = document.getElementById("tr" + index);
 7     if(tr1.style.backgroundColor != highlightcolor ){
 8         tr1.style.backgroundColor = highlightcolor;
 9     }
10 }
11 
12 //还原原背景色
13 function changeback(index){
14     var tr1 = document.getElementById("tr" + index);
15     var chk = document.getElementById("chid" + index);
16     if(chk == null || !chk.checked){
17         tr1.style.backgroundColor = "";
18     }
19 }
20 
21 //表格行单击事件
22 function clickRow(index){
23     if(flag){
24         var tr1 = document.getElementById("tr" + index);
25         var chk = document.getElementById("chid" + index);
26         if(chk == null){
27             return;
28         }else{
29             if(chk.checked){
30                 chk.checked = false;
31                 tr1.style.backgroundColor = "";
32             }else{
33                 chk.checked = true;
34                 tr1.style.backgroundColor = highlightcolor;
35             }
36         }
37     }
38 }
39 
40 //标题栏全选复选框
41 function checkAll(status, idsName){
42     var checkbox=document.getElementsByName(idsName);
43     for (var i=0;i<checkbox.length;i++){
44            checkbox[i].checked=status;
45            if(checkbox[i].checked){
46                changeto(i+1);
47            }else{
48                changeback(i+1);
49            }
50     }
51 }

JSP页面table标题行复选框设置：

1 <td><input type="checkbox" onclick="checkAll(this.checked, 'listForm.ids');" title="全选/取消"/></td>

参数一：this.checked，当前复选框的状态

参数二：listForm.ids，数据行中复选框的name值，即：

1 <td><input type="checkbox" name="listForm.ids"id="chid${i.count}" onclick="clickrow('${i.count}')" /></td>

数据行tr的设置：

1 <tr onclick="clickrow('${i.count}')" onmouseover="changeto('${i.count}')" onmouseout="changeback('${i.count}')" id="tr${i.count}">

转载于:https://www.cnblogs.com/baifeilong/p/3628497.html