全选并改变TR颜色的javascript实现代码
作者:bea
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效 全选并改变TR颜色</title> <script language="JavaScript" type="text/javascript" for="checkbox" event="onclick"> tr_bg
<html>
<head>
<meta http-equiv="Content-Type" content="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 ? '#add6a6' : '#eee' : tr.style.backgroundColor = c.checked ? '#add6d6' : '';
}
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="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#888888">
<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%">***********************</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
<tr style="background-color:#eee"><td><input type="checkbox" name="checkbox" /></td><td>***********************</td></tr>
</table>
</td></tr>
</table>
</form>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
<script language="JavaScript" event="onclick" for="checkbox" type="text/javascript">
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 ? '#FFCC99' : '#eee' : tr.style.backgroundColor = c.checked ? '#FFCC99' : '';
}
function DoSelect(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>
<form id="form1" name="form1" action="" method="post">
<table cellSpacing="1" cellPadding="1" width="500" align="center" bgColor="#888888" border="0">
<tr>
<td>
<input onclick="DoSelect(this)" type="checkbox" value="All" name="sel_box" id="sel_box" /><label for="sel_box">全选</label></td>
</tr>
<tr>
<td>
<table cellSpacing="1" cellPadding="5" width="100%" bgColor="#ffffff" border="0">
<tr style="background:#f1f1f1">
<td width="6%"><input type="checkbox" name="checkbox" /></td>
<td width="94%">内容内容内容内容内容内容内容</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" /></td>
<td>内容内容内容内容内容内容内容</td>
</tr>
<tr style="background:#f1f1f1">
<td><input type="checkbox" name="checkbox" /></td>
<td>内容内容内容内容内容内容内容</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" /></td>
<td>内容内容内容内容内容内容内容</td>
</tr>
<tr style="background:#f1f1f1">
<td><input type="checkbox" name="checkbox" /></td>
<td>内容内容内容内容内容内容内容</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" /></td>
<td>内容内容内容内容内容内容内容</td>
</tr>
<tr style="background:#f1f1f1">
<td><input type="checkbox" name="checkbox" /></td>
<td>内容内容内容内容内容内容内容</td>
</tr>
<tr>
<td><input type="checkbox" name="checkbox" /></td>
<td>内容内容内容内容内容内容内容</td>
</tr>
<tr style="background:#f1f1f1">
<td><input type="checkbox" name="checkbox" /></td>
<td>内容内容内容内容内容内容内容</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JS 无法通过W3C验证的处理方法
- extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
- javascript 简单抽屉效果的实现代码
- Javascript常考语句107条收集
- 风吟的小型JavaScirpt库 (FY.JS).
- 屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键
- 用jQuery实现的模拟下拉框代码
- Jquery实现无刷新DropDownList联动实现代码
- JavaScript this调用规则说明
- javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
- JavaScript中的闭包原理分析
- ExtJS GridPanel 根据条件改变字体颜色
- JavaScript通过attachEvent和detachEvent方法处理带参数的函数
- JavaScript 滚轮事件使用说明
- javascript下4个跨浏览器必备的函数
- Zero Clipboard js+swf实现的复制功能使用方法
- GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
- javascript实现面向对象类的功能书写技巧
- js实现的真正的iframe高度自适应(兼容IE,FF,Opera)