求教:点击行如何勾选checkbox
网上找的隔行变色+点击变色+滑动变色
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script language="javascript"><!--
function senfe(o,a,b,c,d){
var t=document.getElementById(o).getElementsByTagName("tr");
for(var i=0;i<t.length;i++){
t[i].style.backgroundColor=(t[i].sectionRowIndex%2==0)?a:b;
t[i].onclick=function(){
if(this.x!="1"){
this.x="1";//本来打算直接用背景色判断，FF获取到的背景是RGB值，不好判断
this.style.backgroundColor=d;
}else{
this.x="0";
this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
var inp=document.getElementById("ck"+this.sectionRowIndex);
if(inp.checked)
{
inp.checked=false;
}
else
{
inp.checked=true;
}
}
t[i].onmouseover=function(){
if(this.x!="1")this.style.backgroundColor=c;
}
t[i].onmouseout=function(){
if(this.x!="1")this.style.backgroundColor=(this.sectionRowIndex%2==0)?a:b;
}
}
}
-->
</script>
<script type="text/javascript">
function selectAll(checkbox) {
$('input[type=checkbox]').prop('checked', $(checkbox).prop('checked'));
}
</script>
</head>
<body>
<table width="500" border="0" align="center" id="senfe" bgcolor="#eeeeee" >
<tr>
<td align=center><input type=checkbox name=sub > </td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
</tr>
<tr>
<td align=center><input type=checkbox name=sub> </td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
</tr>
<tr>
<td align=center><input type=checkbox name=sub> </td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
</tr>
<tr>
<td align=center><input type=checkbox name=sub> </td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
</tr>
<tr>
<td align=center><input type=checkbox name=sub> </td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
</tr>
<tr>
<td align=center><input type=checkbox name=sub > </td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
<td align=center width="100">11111</td>
</tr>
</table>
<script>
$("#ckAll").click(function() {
$("input[name='sub']").prop("checked", this.checked);
});
$("input[name='sub']").click(function() {
var $subs = $("input[name='sub']");
$("#ckAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);
});
</script>
<script language="javascript"><!--
senfe("senfe","#fff","#EEE","#FFFFBB","#6CE86C");
--></script>
</body>
</html>
[解决办法]
楼主的代码有点乱，我把它重写了一下，把样式写在css里，保持html结构干净，没有多余的属性，js集中在一个地方处理。
采用事件委托的方式，只在table上注册了一个事件，让它处理表格中全部的点击事件，这样有个好处就是动态新增的行也可以得到处理，不用重新注册事件，我加了个添加行的按钮来验证这一点。
鼠标滑动变色就完全交给css的hover来处理了，除了IE6这样的老古董浏览器，现在的浏览器基本都支持。
<!doctype html>
<html>
<head>
<title>复选框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
table {width: 500px; margin: 0 auto; border: 1px solid #eee; border-collapse: collapse;}
td, th {border: 1px solid #eee; text-align: center;}
th {background-color: #ccc;}/* 表头行背景色 */
tr.s0 {background-color: #eee;}/* 交替颜色1 */
tr.s1 {background-color: #fff;}/* 交替颜色2 */
tr:hover td {background-color: #ffe;} /* 鼠标经过的颜色 */
tr.selected td {background-color: #6ce86c;}/* 选中行背景色 */
</style>
<script type="text/javascript">
//页面加载完成后执行
window.onload = function () {
//取表格对象
var table = document.getElementById('senfe');
//设置表格行交替颜色
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].className = 's' + (i % 2);
}
//给表格注册鼠标单击事件
table.onclick = function (evt) {
//取点击的对象
var obj = evt ? evt.target : event.srcElement;
//点击了单元格
if (obj.tagName == 'TD') {
selectRow(obj.parentNode);
}
//点击了复选框
else if (obj.tagName == 'INPUT') {
if (obj.id == 'chkAll') {//点击了全选框
for (var i = 1; i < table.rows.length; i++) {
selectRow(table.rows[i], obj.checked);
}
}
else {//点击了其他复选框
selectRow(obj.parentNode.parentNode);
}
}
};
//添加行
document.getElementById('add').onclick = function () {
var newTr = table.insertRow(table.rows.length);
newTr.insertCell().innerHTML = '<input type="checkbox" />';
for (var i = 1; i < 5; i++) newTr.insertCell(newTr.cells.length).innerHTML = '11111' + i;
newTr.className = 's' + (1 - table.rows.length % 2);
};
};
//选择行
function selectRow(row, select) {
if (select === true
[解决办法]
select === undefined && row.className.indexOf('selected') == -1) {
row.className += ' selected';//添加选中样式
row.cells[0].children[0].checked = true;//选中本行复选框
}
else {
row.className = row.className.replace(/ selected/g, '');//取消选中样式
row.cells[0].children[0].checked = false;//取消选中本行复选框
}
}
</script>
</head>
<body>
<button id="add">添加行</button>
<table id="senfe">
<tr>
<th><input type="checkbox" id="chkAll" /></th>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
</table>
</body>
</html>