- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
表格隔行换色，并在表格的每一行中加入一个复选框按钮，选中后该行会变为其它颜色，提升用户体验。
<html> <head> <meta http-equiv="Content-Type" mrc="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 ? '#0066CC' : '#EEEEEE' : tr.style.backgroundColor = c.checked ? '#0066CC' : ''; } 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="360" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#999999"> <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%">CODEFNAS.NET</td></tr> <tr><td><input type="checkbox" name="checkbox" /></td><td>CODEFNAS.NET</td></tr> <tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>CODEFNAS.NET</td></tr> <tr><td><input type="checkbox" name="checkbox" /></td><td>CODEFNAS.NET</td></tr> <tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>CODEFNAS.NET</td></tr> </table> </td></tr> </table> </form> </body> </html>