表格復選和復選變色效果

2009-06-05　來源/作者：懶人圖庫　分類：表格圖層　 «»

//復選后單元格變色
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  target="_blank">http://bbs.lanrentuku.com/</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  target="_blank">http://www.it365cn.com/bbs</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  target="_blank">http://www.blueidea.com/bbs</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  target="_blank">http://www.fwcn.com/bbs</a></td>
 </tr>
 <tr class="row">
  <td colspan="3"><input type="checkbox" name="chkAll" title="全選/取消" onclick="selectAll()"> <strong>全選/取消</strong></td>
  </tr>
</form> 
</table>
<p>查找更多代碼，請訪問：<a href="http://www.cxj168.com" target="_blank">懶人圖庫</a></p>

運行代碼保存代碼提示：您可以先修改部分代碼再運行，保存代碼功能在Firefox下無效。

標簽：表格圖層