求助-勾选表格里的复选框如何改变行的背景色？

zhusha 楼主

勾选表格里的复选框如何改变tr的背景色？

<table width="300" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#CCCCCC"> <td><input type="checkbox" name="checkbox" value="checkbox" /></td> </tr> </table>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

[ 本帖最后由 zhusha 于 2006-9-29 11:00 编辑 ]

wtywin

<style type="text/css"> <!-- .red_div{background-color:#FFE1E1} .blue_div{background-color:#cccccc} --> </style> <script language="JavaScript"> function hutia(obj){ switch(event.type){ case "click": try{ obj.parentNode.focusedItem.className="blue_div"; obj.parentNode.focusedItem.locked=false; }catch(e){} obj.parentNode.focusedItem=obj; obj.parentNode.focusedItem.className="red_div"; obj.parentNode.focusedItem.locked=true; break; case "mouseover": if(obj.locked)return; obj.className="red_div"; break; case "mouseout": if(obj.locked)return; obj.className="blue_div"; break; } } </script> <form action="" method="post" name="form"> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#cccccc" onclick="hutia(this)" onmouseover="hutia(this)" onmouseout="hutia(this)"> <td><input type="checkbox" name="checkbox" value="checkbox" /></td> </tr> </table> </form>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

[ 本帖最后由 wtywin 于 2006-9-29 11:12 编辑 ]

zhusha 楼主

多谢楼上的！

但是和预期的效果还是有些出入，我想要的效果类似163邮箱里邮件选择的效果，即选中复选框该行变色，取消选择该行恢复原背景色。

parentNode可以用于input吗？

zhusha 楼主

已经解决了，谢谢！
http://bbs.blueidea.com/viewthread.php?tid=2575555

wtywin

<style type="text/css"> <!-- .red_div{background-color:#FFE1E1} .blue_div{background-color:#cccccc} --> </style> <script language="JavaScript"> function SenFe_Code(sname,sid){ if(sname.checked){ sid.style.background='#FFE1E1'; }else{ sid.style.background='#cccccc'; } } </script> <form action="" method="post" name="form"> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#cccccc"> <td><input name="checked" type="checkbox" value="OK" onclick="SenFe_Code(this,parentElement.parentElement);"></td> </tr> </table> </form>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

marvellous

<style type="text/css"> <!-- .row {BACKGROUND-COLOR: expression(rowIndex%2==1?'':'#F5F5F5')} Body {FONT-SIZE: 12px; FONT-FAMILY: Arial,Verdana,sans-serif;LINE-HEIGHT: 150%;} Td {FONT-SIZE: 12px; FONT-FAMILY: Arial,Verdana,sans-serif;LINE-HEIGHT: 150%;} .tb {border-collapse: collapse} --> </style> <script language="JavaScript" type="text/JavaScript"> //复选 function selectAll(chk) { var chk = document.form1.chkAll.checked; for (i=0;i<document.all.length;i++) { if (document.all[i].name=="id[]") { document.all[i].checked=chk; chkRow(document.all[i]); }}} //复选后单元格变色 function chkRow(obj){ var r = obj.parentElement.parentElement; if(obj.checked){ r.style.backgroundColor="#E6E9F2";} else {if(r.rowIndex%2==1)r.style.backgroundColor="";else r.style.backgroundColor="#F5F5F5";} } </script> <table width="50%" border="1" cellpadding="3" cellspacing="0" bordercolor="#333333" class="tb"> <form name="form1" method="post" action=""> <tr class="row"> <td width="5%"> </td> <td width="33%" align="center"><strong>论坛名称</strong></td> <td width="62%" align="center"><strong>网 址</strong></td> </tr> <tr class="row"> <td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td> <td align="center">织梦乱弹</td> <td align="center"><a href="http://www.it365cn.com/bbs" target="_blank">http://www.it365cn.com/bbs</a></td> </tr> <tr class="row"> <td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td> <td align="center">经典论坛</td> <td align="center"><a href="http://bbs.blueidea.com/" target="_blank">http://bbs.blueidea.com/</a></td> </tr> <tr class="row"> <td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td> <td align="center">点燃灵感</td> <td align="center"><a href="http://www.fwcn.com/bbs" target="_blank">http://www.fwcn.com/bbs</a></td> </tr> <tr class="row"> <td colspan="3"><input type="checkbox" name="chkAll" title="全选/取消" onclick="selectAll()"> <strong>全选/取消</strong></td> </tr> </form> </table>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>无标题文档</title> <script> function CheckAll(form){ for (var i=0;i<form.elements.length;i++){ var e = form.elements[i]; if (e.name != 'chkAll') e.checked = form.chkAll.checked; } } </script> <script language=javascript> function bg(obj) { if(obj.style.background=="#d3e6fc") { obj.style.background="#eaeecc"; obj.children[0].children[0].checked=true; } else { obj.style.background="#e3effd"; obj.children[0].children[0].checked=false; } } </script> <script language=javascript> function bg2(obj) { if(obj.style.background=="#d3e6fc") { obj.style.background="#eaeecc"; obj.children[0].children[0].checked=true; } else { obj.style.background="#ffffff"; obj.children[0].children[0].checked=false; } } </script> </head> <body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"> <form action="" method="post" name="form2" id="form2"> <table width="100%" border="0" cellpadding="0" cellspacing="1" class="mainboder"> <tr> <td width="22" height="16" align="center" background="../../images/title_bg.gif"> <input type="checkbox" name="chkAll" value="on" onclick="CheckAll(this.form)"/> </td> <td width="60" height="23" background="../../images/title_bg.gif" class="contenthead"><div align="center">1111</div></td> <td width="100" background="../../images/title_bg.gif" class="contenthead"><div align="center">1111</div></td> <td width="100" background="../../images/title_bg.gif" class="contenthead"><div align="center">11111</div></td> <td width="100" background="../../images/title_bg.gif" class="contenthead"><div align="center">11111</div></td> <td width="100" background="../../images/title_bg.gif" class="contenthead"><div align="center">11111</div></td> <td width="80" background="../../images/title_bg.gif" class="contenthead"><div align="center">11111</div></td> <td background="../../images/title_bg.gif" class="contenthead"><div align="center">11111</div></td> </tr> <tr onMouseOut="if(this.style.background!='#eaeecc')this.style.background='#e3effd';" onMouseOver="if(this.style.background!='#eaeecc')this.style.background='#d3e6fc';" onclick="bg(this)" id="Tr1" bgcolor="#e3effd"> <td width="22" align="center"><input type="checkbox"> <td><div align="center">00001</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr onMouseOut="if(this.style.background!='#eaeecc')this.style.background='#ffffff';" onMouseOver="if(this.style.background!='#eaeecc')this.style.background='#d3e6fc';" onclick="bg2(this)" id="Tr2" bgcolor="#ffffff"> <td width="22" align="center"><input type="checkbox"> <td><div align="center">00001</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr onMouseOut="if(this.style.background!='#eaeecc')this.style.background='#e3effd';" onMouseOver="if(this.style.background!='#eaeecc')this.style.background='#d3e6fc';" onclick="bg(this)" id="Tr3" bgcolor="#e3effd"> <td width="22" align="center"><input type="checkbox"> <td><div align="center">00001</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr onMouseOut="if(this.style.background!='#eaeecc')this.style.background='#ffffff';" onMouseOver="if(this.style.background!='#eaeecc')this.style.background='#d3e6fc';" onclick="bg2(this)" id="Tr4" bgcolor="#ffffff"> <td width="22" align="center"><input type="checkbox"> <td><div align="center">00001</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr onMouseOut="if(this.style.background!='#eaeecc')this.style.background='#e3effd';" onMouseOver="if(this.style.background!='#eaeecc')this.style.background='#d3e6fc';" onclick="bg(this)" id="Tr5" bgcolor="#e3effd"> <td width="22" align="center"><input type="checkbox"> <td><div align="center">00001</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr onMouseOut="if(this.style.background!='#eaeecc')this.style.background='#ffffff';" onMouseOver="if(this.style.background!='#eaeecc')this.style.background='#d3e6fc';" onclick="bg2(this)" id="Tr6" bgcolor="#ffffff"> <td width="22" align="center"><input type="checkbox"> <td><div align="center">00001</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr onMouseOut="if(this.style.background!='#eaeecc')this.style.background='#e3effd';" onMouseOver="if(this.style.background!='#eaeecc')this.style.background='#d3e6fc';" onclick="bg(this)" id="Tr7" bgcolor="#e3effd"> <td width="22" align="center"><input type="checkbox"> <td><div align="center">00001</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr onMouseOut="if(this.style.background!='#eaeecc')this.style.background='#ffffff';" onMouseOver="if(this.style.background!='#eaeecc')this.style.background='#d3e6fc';" onclick="bg2(this)" id="Tr8" bgcolor="#ffffff"> <td width="22" align="center"><input type="checkbox"> <td><div align="center">00001</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr onMouseOut="if(this.style.background!='#eaeecc')this.style.background='#e3effd';" onMouseOver="if(this.style.background!='#eaeecc')this.style.background='#d3e6fc';" onclick="bg(this)" id="T9" bgcolor="#e3effd"> <td width="22" align="center"><input type="checkbox"> <td><div align="center">00001</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> <tr onMouseOut="if(this.style.background!='#eaeecc')this.style.background='#ffffff';" onMouseOver="if(this.style.background!='#eaeecc')this.style.background='#d3e6fc';" onclick="bg2(this)" id="Tr10" bgcolor="#ffffff"> <td width="22" align="center"><input type="checkbox"> <td><div align="center">00001</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center">2222</div></td> <td><div align="center"></div></td> <td><div align="center"></div></td> </tr> </table> </form>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

[ 本帖最后由 marvellous 于 2006-9-29 21:41 编辑 ]

c_xiaobing

谢谢了。ＣＯＰＹ　ＩＴ