JS代码实现如何选中表格行前的复选框则行变色?
【实例代码】html xmlns=http://www。w3。org/1999/xhtml headtitle标题页-学无忧(www。xue51。com)/title/headbodytable width=50% border=0 cellspacing=0 cellpadding=0 align=center tr td bgcolor=#CC6655input type=checkbox name=checkbox value=checkbox onClick=if(this。 checked){this。parentNode。parentNode。style。background...全部
【实例代码】html xmlns=http://www。w3。org/1999/xhtml headtitle标题页-学无忧(www。xue51。com)/title/headbodytable width=50% border=0 cellspacing=0 cellpadding=0 align=center tr td bgcolor=#CC6655input type=checkbox name=checkbox value=checkbox onClick=if(this。
checked){this。parentNode。parentNode。style。background='#cc5566'}else{this。parentNode。parentNode。style。
background=''}全选/td /tr tr tdtable id=tab1 width=100% border=0 cellspacing=0 cellpadding=0 tr tdinput type=checkbox name=checkbox value=checkbox onclick=if(this。
checked){this。parentNode。parentNode。style。background='#cc5566'}else{this。parentNode。parentNode。style。
background=''} 第一行/tdtd第二列/td /tr tr tdinput type=checkbox name=checkbox value=checkbox onclick=if(this。
checked){this。parentNode。parentNode。style。background='#cc5566'}else{this。parentNode。parentNode。style。
background=''} 第二行/tdtd第二列/td /tr /table/td /tr/table/body/html
【难点剖析】本例在表格的第一列中添加了“checkbox”标签,实现复选框效果。
当用户选中复选框时,触发其“onclick”事件。“parentNode”表示当前选中元素的父节点,当前元素是“checkbox”,其父节点是“td”标签,因为要求全行都选中,所以还必须再选择上一级父节点“tr”标签,本例使用了“this.parentNode.parentNode”。
修改表格行的背景色使用“background”属性。收起