JS源代码:
//需要设置tr背景颜色
var highlightcolor='#bfecfc'; //设置背景颜色
function changeto(index){
var tr1 = document.getElementById("tr" + index);
if(tr1.style.backgroundColor != highlightcolor ){
tr1.style.backgroundColor = highlightcolor;
}
} //还原原背景色
function changeback(index){
var tr1 = document.getElementById("tr" + index);
var chk = document.getElementById("chid" + index);
if(chk == null || !chk.checked){
tr1.style.backgroundColor = "";
}
} //表格行单击事件
function clickRow(index){
if(flag){
var tr1 = document.getElementById("tr" + index);
var chk = document.getElementById("chid" + index);
if(chk == null){
return;
}else{
if(chk.checked){
chk.checked = false;
tr1.style.backgroundColor = "";
}else{
chk.checked = true;
tr1.style.backgroundColor = highlightcolor;
}
}
}
} //标题栏全选复选框
function checkAll(status, idsName){
var checkbox=document.getElementsByName(idsName);
for (var i=0;i<checkbox.length;i++){
checkbox[i].checked=status;
if(checkbox[i].checked){
changeto(i+1);
}else{
changeback(i+1);
}
}
}
JSP页面table标题行复选框设置:
1 <td><input type="checkbox" onclick="checkAll(this.checked, 'listForm.ids');" title="全选/取消"/></td>
参数一:this.checked,当前复选框的状态
参数二:listForm.ids,数据行中复选框的name值,即:
<td><input type="checkbox" name="listForm.ids"id="chid${i.count}" onclick="clickrow('${i.count}')" /></td>
数据行tr的设置:
<tr onclick="clickrow('${i.count}')" onmouseover="changeto('${i.count}')" onmouseout="changeback('${i.count}')" id="tr${i.count}">