html table:
<table id="mytable"> <tr> <th rowspan="2"><input type="checkbox" id="selectAll"></th> <th rowspan="2">1</th> <th rowspan="2">2</th> <th colspan="3">3</th> <th colspan="3">4</th> </tr> <tr> <th>x</th> <th>y</th> <th>z</th> <th>x</th> <th>y</th> <th>z</th> </tr> </table> //其他行通过js中的appendto动态添加
js:
var num=5; for (var i=0;i<num;i++) { var tab= $('<tr id="data'+i+'" onclick="data_onclick(this)">' +'<td>' +'<input type="checkbox" id="box'+i+'" onclick="update()"' + (i==0?"checked":"") +'>' +'</td>' +'<td class="info">1</td>' +'<td class="info">2</td>' +'<td class="info">3</td>' +'<td class="info">4</td>' +'<td class="info">5</td>' +'<td class="info">6</td>' +'<td class="info">7</td>' +'<td class="info">8</td>' +'</tr>') tab.appendTo('#mytable'); } function data_onclick(obj) { var obj_input=obj.firstChild.firstChild; //进入每一行的input节点 //alert(obj_input.id); var checkbox=document.getElementById(obj_input.id);//链接到input的id if(checkbox.checked)//判断checkbox的状态 { checkbox.checked = false; } else { checkbox.checked = true; } update(); } function update(){ $("input[type='checkbox']").click(function(e){ e.stopPropagation(); }); //点击checkbox后防止tr的点击事件也被触发; $(':checkbox:not(:checked)').each(function(){ //对于未被选中checkbox的行 var par_node=document.getElementById(this.id).parentNode.parentNode;//这里的this代表input元素(节点),向上追述两个父级即可进入tr元素 document.getElementById(par_node.id).style.background="";//控制tr的背景色 }); $(':checkbox:checked').each(function(){ var par_node=document.getElementById(this.id).parentNode.parentNode; document.getElementById(par_node.id).style.background="yellow"; }); }