表格带全选按钮功能,当用户全选后各个选项的背景颜色改变显示,常用的表格选中背景颜色变色效果。
<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) {//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) 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";} }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) </script> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></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="https://www.wuming.ren" target="_blank">https://www.wuming.ren</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="https://www.wuming.ren" target="_blank">https://www.wuming.ren</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="https://www.wuming.ren" target="_blank">https://www.wuming.ren</a></td> </tr> <tr class="row"> <td colspan="3"><input type="checkbox" name="chkAll" title="全选/取消" onclick="selectAll()"> <strong>全选/取消</strong></td> </tr> </form> </table> ---------------------------------------------------------------------- <style type="text/css"> <!-- Td {FONT-SIZE: 12px; FONT-FAMILY: Arial,Verdana,sans-serif;LINE-HEIGHT: 150%;} --> </style> <script> function bgChange(obj){ obj.bgColor=obj.bgColor==""?"#ffffff":""; } </script> <table width="100%" border="0" cellspacing="1" bgcolor=#66ccee> <tr onclick="bgChange(this)" bgcolor=#ffffff> <td>武鸣人一号</td> </tr> <tr onclick="bgChange(this)" bgcolor=#ffffff> <td>武鸣人二号</td> </tr> <tr onclick="bgChange(this)" bgcolor=#ffffff> <td>武鸣人三号</td> </tr> </table>
本文来自武鸣人网站,转载请注明出处