站内首页 > 网页前端 > JS > 正文

表格复选和复选变色效果

<style type="text/css"></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://Netton.cn/" target="_blank">http://Netton.cn/</a></td> </tr> <tr class="row">  <td align="center"><input type="checkbox" name="id[]" value="1" onclick="javascript:chkRow(this);"></td>  <td align="center">DIV+CSS教程</td>  <td align="center"><a href="/css2/index.shtml" target="_blank">http://Netton.cn/css-1.shtml</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="/css2/index4.shtml" target="_blank">http://Netton.cn/css-4.shtml</a></td> </tr> <tr class="row">  <td colspan="3"><input type="checkbox" name="chkAll" title="全选/取消" onclick="selectAll()"> <strong>全选/取消</strong></td>  </tr></form> </table>

Netton.cn 提示：可以先修改部分代码后再运行

<< 如何用CSS自定义鼠标显示的形状？jQuery.API源码深入剖析以及应用实现－ jQuery对象访问和数据缓存 >>

查看所有评论

相关文章

在线留言

© 2021

i0561搜索.All rights reserved. v3.24