`

在表格中复选框选择、选中后变色

阅读更多
<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)

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">www.ifeng.com</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">www.qq.com</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="centerwww.huanqiu.comdesign</td>
</tr>
<tr class="row">
  <td colspan="3"><input type="checkbox" name="chkAll" title="全选/取消" onclick="selectAll()"> <strong>全选/取消</strong></td>
  </tr>
</form>
</table>
分享到:
评论

相关推荐

    js 实现 选中表格行前的复选框则行变色

    js 实现 选中表格行前的复选框则行变色! 值得下载看看!资源免费,大家分享!!

    js实现表格变色(鼠标移动 选中变色)

    鼠标移动到表格中时该行变色 离开时恢复 选中该行的复选框时变色 离开后不变色 取消选中后恢复

    layui的表格table选中数据后更改本行的颜色

    在layui的表格table中,选中某行数据之后更改本行颜色,取消选中后恢复原样式。在layui的表格table中,选中某行数据之后更改本行颜色,取消选中后恢复原样式。

    JS+CSS的table表格特效

    超好用JS+CSS的table表格特效(包括复选框全选、表格加滚动条点击行变色等)

    《程序天下:JavaScript实例自学手册》光盘源码

    10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选(二) 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景...

    程序天下:JavaScript实例自学手册

    10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框的反选 10.14 选中所有复选框 10.15 复选框全选(二) 10.16 改变slsect选中项的颜色特效 第11章 颜色处理和菜单特效 11.1 背景...

    JavaScript网页特效范例宝典源码

    实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 120 实例076 让您的密码域更安全 120 实例077 不提交表单自动检测密码域是否相同 121 2.6 表单应用 122 实例078 通过JavaScript控制表单的提交与...

    JavaScript实用范例词典04-14

    9.42 检验两个复选框是否同时选中... 291 9.43 解除所有复选框的选中... 292 9.44 全选所有复选框... 293 9.45 全选或取消的复选框... 295 9.46 带标签的复选框... 296 9.47 取得下拉列表中选取的值... 297 ...

    Java开发实战1200例(第1卷).(清华出版.李钟尉.陈丹丹).part3

    实例048 复选框控件数组 59 实例049 用数组反转字符串 60 3.3 数组排序与查询 61 实例050 使用选择排序法 61 实例051 使用冒泡排序法 62 实例052 使用快速排序法 64 实例053 使用直接插入法 65 实例054 使用sort方法...

    C#编程经验技巧宝典

    74 &lt;br&gt;0107 如何获得字符串中数字或字母的长度 74 &lt;br&gt;0108 如何获得字符串中某个数字的位置 75 &lt;br&gt;0109 获得字符串中汉字的个数 76 &lt;br&gt;0110 获得字符串中指定后几位字符 76 &lt;br&gt;0111 ...

Global site tag (gtag.js) - Google Analytics