表格逐行变色
内容纲要
优点:
1.代码干净,无冗余标签.
2.样式,结构分离(为了方便,样式用内联的形式,实现应用时可以用外联方式引用.)
3.用JS控制表格的逐行变色
4.支持选中项高亮
5.支持checkbox的全选/取消功能
6.分页标签已经做好,没有做后台代码(以后有时间更新)
7.兼容性测试:已测试过ie5.01 ie5.5 ie6 ie7 ff2 opera浏览器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
font-family: Tahoma, Arial, Helvetica, Sans-serif, "宋体";
}
table {
width: 700px;
margin: 0px auto;
font: Georgia 11px;
font-size: 12px;
color: #333333;
text-align: center;
border-collapse: collapse;
/*细线表格代码*/
}
table td {
border: 1px solid #999;
/*细线表格线条颜色*/
height: 22px;
}
caption {
text-align: center;
font-size: 12px;
font-weight: bold;
margin: 0 auto;
}
tr.t1 td {
background-color: #fff;
}
/* 交替行第一行的背景色 */
tr.t2 td {
background-color: #eee;
}
/* 交替行第二行的背景色 */
tr.t3 td {
background-color: #ccc;
}
/* 鼠标经过时的背景色 */
th,
tfoot tr td {
font-weight: bold;
text-align: center;
background: #c5c5c5;
}
th {
line-height: 30px;
height: 30px;
}
tfoot tr td {
background: #fff;
line-height: 26px;
height: 26px;
}
thead {
border: 1px solid #999;
}
thead tr td {
text-align: center;
}
#page {
text-align: center;
float: right;
}
#page a,
#page a:visited {
width: 60px;
height: 22px;
line-height: 22px;
border: 1px black solid;
display: block;
float: left;
margin: 0 3px;
background: #c9c9c9;
text-decoration: none;
}
#page a:hover {
background: #c1c1c1;
text-decoration: none;
}
.grayr {
padding: 2px;
font-size: 11px;
background: #fff;
float: right;
}
.grayr a {
padding: 2px 5px;
margin: 2px;
color: #000;
text-decoration: none;
;
border: 1px #c0c0c0 solid;
}
.grayr a:hover {
color: #000;
border: 1px orange solid;
}
.grayr a:active {
color: #000;
background: #99ffff
}
.grayr span.current {
padding: 2px 5px;
font-weight: bold;
margin: 2px;
color: #303030;
background: #fff;
border: 1px orange solid;
}
.grayr span.disabled {
padding: 2px 5px;
margin: 2px;
color: #797979;
background: #c1c1c1;
border: 1px #c1c1c1 solid;
}
</style>
<script type="text/javascript">
function selectAll() {
if(this.checked == true) {
checkAll('test');
} else {
clearAll('test');
}
}
function checkAll(name) {
var el = do
cument.getElementsByTagName('input');
var len = el.length;
for(var i = 0; i < len; i++) {
if((el[i].type == "checkbox") && (el[i].name == name)) {
el[i].checked = true;
}
}
}
function clearAll(name) {
var el = document.getElementsByTagName('input');
var len = el.length;
for(var i = 0; i < len; i++) {
if((el[i].type == "checkbox") && (el[i].name == name)) {
el[i].checked = false;
}
}
}
</script>
</head>
<body>
<table>
<caption>小小的表格</caption>
<thead>
<tr>
<th><input onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" type="checkbox" value="" name="test" title="全选/取消" /></th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>生日</th>
<th>住址</th>
<th>电话</th>
<th>电邮</th>
<th>网址</th>
</tr>
</thead>
<tbody id="tab">
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
<tr>
<td><input type="checkbox" value="a" name="test" /> </td>
<td>indeex</td>
<td>男</td>
<td>20</td>
<td>1995/10/23</td>
<td>河南洛阳</td>
<td>123456789</td>
<td>imisslovelove@live.com</td>
<td>http://www.indeex.cc</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><input onclick="if(this.checked==true) { checkAll('test'); } else { clearAll('test'); }" type="checkbox" value="" name="test" title="全选/取消" /></td>
<td colspan="8">
<div class="grayr"><span class="disabled"> < </span><span class="current">1</span>
<a href="#?page=2">2</a>
<a href="#?page=3">3</a>
<a href="#?page=4">4</a>
<a href="#?page=5">5</a>
<a href="#?page=6">6</a>
<a href="#?page=7">7</a>...
<a href="#?page=199">199</a>
<a href="#?page=200">200</a>
<a href="#?page=2"> > </a>
</div>
<!-- <div id="page"> <a href="">首 页</a><a href="">上一页</a><a href="">下一页</a><a href="">末 页</a></div>-->
</td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
var Ptr = document.getElementById("tab").getElementsByTagName("tr");
function $() {
for(i = 1; i < Ptr.length + 1; i++) {
Ptr[i - 1].className = (i % 2 > 0) ? "t1" : "t2";
}
}
window.onload = $;
for(var i = 0; i < Ptr.length; i++) {
Ptr[i].onmouseover = function() {
this.tmpClass = this.className;
this.className = "t3";
};
Ptr[i].onmouseout = function() {
this.className = this.tmpClass;
};
}
</script>
</body>
</html>