全选并改变TR颜色的javascript实现代码

软件编程
2026-01-11 10:26:45

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效 全选并改变TR颜色</title>   </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需再刷新一下页面才能执行]

<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>