首页 > 网络编程 > JavaScript > 网页特效 > 典型特效 > TR颜色 全选并改变TR颜色的javascript实现代码 2010-03-06 13:00:07 作者： 网页特效 全选并改变TR颜色 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效 全选并改变TR颜色</title> <script language="JavaScript" type="text/javascript" for="checkbox" event="onclick"> tr_bgcolor(this); </script> <script language="JavaScript" type="text/javascript"> <!-- function tr_bgcolor(c){ var tr = c.parentNode.parentNode; tr.rowIndex % 2 == 0 ? tr.style.backgroundColor = c.checked ? '#add6a6' : '#eee' : tr.style.backgroundColor = c.checked ? '#add6d6' : ''; } function selall(obj){ for (var i=0; i<obj.form.elements.length; i++) if (obj.form.elements[i].type == 'checkbox' && obj.form.elements[i] != obj){ obj.form.elements[i].checked = obj.checked; tr_bgcolor(obj.form.elements[i]); } } //--> </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#888888"> <tr><td><input name="selectall" type="checkbox" value="全选" onclick="selall(this)" /></td></tr> <tr><td> <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> <tr style="background-color:#eee;"><td width="6%"><input type="checkbox" name="checkbox" /></td><td width="94%">***********************</td></tr> <tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr> <tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr> <tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr> <tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr> <tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr> <tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr> <tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr> <tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr> </table> </td></tr> </table> </form> </body> </html> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] <script language="JavaScript" event="onclick" for="checkbox" type="text/javascript"> tr_bgcolor(this); </script> <script language="JavaScript" type="text/javascript"> <!-- function tr_bgcolor(c){ var tr = c.parentNode.parentNode; tr.rowIndex % 2 == 0 ? tr.style.backgroundColor = c.checked ? '#FFCC99' : '#eee' : tr.style.backgroundColor = c.checked ? '#FFCC99' : ''; } function DoSelect(obj){ for (var i=0; i<obj.form.elements.length; i++){ if (obj.form.elements[i].type == 'checkbox' && obj.form.elements[i] != obj){ obj.form.elements[i].checked = obj.checked; tr_bgcolor(obj.form.elements[i]); } } } //--> </script> <form id="form1" name="form1" action="" method="post"> <table cellSpacing="1" cellPadding="1" width="500" align="center" bgColor="#888888" border="0"> <tr> <td> <input onclick="DoSelect(this)" type="checkbox" value="All" name="sel_box" id="sel_box" /><label for="sel_box">全选</label></td> </tr> <tr> <td> <table cellSpacing="1" cellPadding="5" width="100%" bgColor="#ffffff" border="0"> <tr style="background:#f1f1f1"> <td width="6%"><input type="checkbox" name="checkbox" /></td> <td width="94%">内容内容内容内容内容内容内容</td> </tr> <tr> <td><input type="checkbox" name="checkbox" /></td> <td>内容内容内容内容内容内容内容</td> </tr> <tr style="background:#f1f1f1"> <td><input type="checkbox" name="checkbox" /></td> <td>内容内容内容内容内容内容内容</td> </tr> <tr> <td><input type="checkbox" name="checkbox" /></td> <td>内容内容内容内容内容内容内容</td> </tr> <tr style="background:#f1f1f1"> <td><input type="checkbox" name="checkbox" /></td> <td>内容内容内容内容内容内容内容</td> </tr> <tr> <td><input type="checkbox" name="checkbox" /></td> <td>内容内容内容内容内容内容内容</td> </tr> <tr style="background:#f1f1f1"> <td><input type="checkbox" name="checkbox" /></td> <td>内容内容内容内容内容内容内容</td> </tr> <tr> <td><input type="checkbox" name="checkbox" /></td> <td>内容内容内容内容内容内容内容</td> </tr> <tr style="background:#f1f1f1"> <td><input type="checkbox" name="checkbox" /></td> <td>内容内容内容内容内容内容内容</td> </tr> </table> </td> </tr> </table> </form> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 您可能感兴趣的文章:用javascript实现改变TEXTAREA滚动条和按钮的颜色，以及怎样让滚动条变得扁平javascript背景颜色按时变换用javascript实现li 列表数据隔行变换背景颜色javascript select 改变字的颜色javascript自动改变文字大小和颜色的效果的小例子javascript使用onclick事件改变选中行的颜色JavaScript实现自动变换表格边框颜色
