<html>
<head>
<script type=text/javascript src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head><body>
<table>
<tr>
<td><input type='checkbox'/>dddddd</td>
</tr>
</table></body>
</html>
<script>
$("tr").click(function(){
if($(this).attr('class')=='false'||$(this).attr('class').length<=0){
$(this).find("input[type=checkbox]").attr("checked",true);
$(this).addClass('true');
$(this).removeClass('false');
}else if($(this).attr('class')=='true'){
$(this).find("input[type=checkbox]").attr("checked",false);
$(this).addClass('false');
$(this).removeClass('true');
}});
</script>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script>
<!--
function setColor(o, a, b, c, d) {
var focusColor = c;
var t = document.getElementById(o).getElementsByTagName("tr");
for (var i = 0; i < t.length; i++) {
//设置颜色
t[i].style.backgroundColor = (t[i].rowIndex % 2 == 0) ? a : b;
//保存颜色
t[i].onclick = function (e) {
var box = this.cells[0].getElementsByTagName("INPUT")[0];
var ele = window.event ? window.event.srcElement : e.target;
if (ele.tagName && ele.tagName != "INPUT") {
box.checked = !box.checked;
}
if (box.checked) {
this.style.backgroundColor = d;
} else {
this.style.backgroundColor = (this.rowIndex % 2 == 0) ? a : b
}
this.setAttribute("oldColor", this.style.backgroundColor);
}
t[i].onmouseover = function () {
this.setAttribute("oldColor", this.style.backgroundColor);
this.style.backgroundColor = c;
}
t[i].onmouseout = function () {
this.style.backgroundColor = this.getAttribute("oldColor");
}
}
}
//-->
</script>
</head>
<body>
<table width="500" border="0" align="center" id="senfe" bgcolor="#eeeeee">
<tr>
<td align="center">
<input type="checkbox" name="sub">
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" name="sub">
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" name="sub">
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" name="sub">
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" name="sub">
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
</tr>
<tr>
<td align="center">
<input type="checkbox" name="sub">
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
<td align="center" width="100">
11111
</td>
</tr>
</table>
<script>
<!--
setColor("senfe", "#fff", "#EEE", "#FFFFBB", "#6CE86C");
//--></script>
</body>
</html>
采用事件委托的方式，只在table上注册了一个事件，让它处理表格中全部的点击事件，这样有个好处就是动态新增的行也可以得到处理，不用重新注册事件，我加了个添加行的按钮来验证这一点。
鼠标滑动变色就完全交给css的hover来处理了，除了IE6这样的老古董浏览器，现在的浏览器基本都支持。<!doctype html>
<html>
<head>
<title>复选框</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
table {width: 500px; margin: 0 auto; border: 1px solid #eee; border-collapse: collapse;}
td, th {border: 1px solid #eee; text-align: center;}
th {background-color: #ccc;} /* 表头行背景色 */
tr.s0 {background-color: #eee;} /* 交替颜色1 */
tr.s1 {background-color: #fff;} /* 交替颜色2 */
tr:hover td {background-color: #ffe;} /* 鼠标经过的颜色 */
tr.selected td {background-color: #6ce86c;} /* 选中行背景色 */
</style>
<script type="text/javascript">
//页面加载完成后执行
window.onload = function () {
//取表格对象
var table = document.getElementById('senfe');
//设置表格行交替颜色
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].className = 's' + (i % 2);
}
//给表格注册鼠标单击事件
table.onclick = function (evt) {
//取点击的对象
var obj = evt ? evt.target : event.srcElement;
//点击了单元格
if (obj.tagName == 'TD') {
selectRow(obj.parentNode);
}
//点击了复选框
else if (obj.tagName == 'INPUT') {
if (obj.id == 'chkAll') { //点击了全选框
for (var i = 1; i < table.rows.length; i++) {
selectRow(table.rows[i], obj.checked);
}
}
else { //点击了其他复选框
selectRow(obj.parentNode.parentNode);
}
}
};
//添加行
document.getElementById('add').onclick = function () {
var newTr = table.insertRow(table.rows.length);
newTr.insertCell().innerHTML = '<input type="checkbox" />';
for (var i = 1; i < 5; i++) newTr.insertCell(newTr.cells.length).innerHTML = '11111' + i;
newTr.className = 's' + (1 - table.rows.length % 2);
};
};
//选择行
function selectRow(row, select) {
if (select === true || select === undefined && row.className.indexOf('selected') == -1) {
row.className += ' selected'; //添加选中样式
row.cells[0].children[0].checked = true; //选中本行复选框
}
else {
row.className = row.className.replace(/ selected/g, ''); //取消选中样式
row.cells[0].children[0].checked = false; //取消选中本行复选框
}
}
</script>
</head>
<body>
<button id="add">添加行</button>
<table id="senfe">
<tr>
<th><input type="checkbox" id="chkAll" /></th>
<th>列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
<td>11111</td>
</tr>
</table>
</body>
</html>
Response.Write"<td align=center>"&username&"</td>"
Response.Write"<td align=center>"&rs("finitime")&"</td>"
Response.Write"<td align=center><input type=checkbox value='&rs('id')&'>这样的行所以点击和全选都无效
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" chartset="utf-8">
<title>隔行换色</title>
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<style type="text/css">
table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}
.changeColor{
background: red!important;
}
</style>
</head>
<body>
<table class="myTable"> </table>
<script type="text/javascript">
$(function(){
for(var i = 0;i<10 ;i++){
$('.myTable').append("<tr class="+i+"><td>111111111</td><td>2222222</td><td>3333333</td></tr>");
if((i+1)%2==1){
$("table tr:last-child").css({"background":"blue"});
}else{
$("table tr:last-child").css({"background":"orange"});
}
}
$('tr').bind('mousemove',function(event){
var target = $(event.currentTarget);
target.addClass("changeColor");
}) ;
$('tr').bind('mouseout',function(event){
var target = $(event.currentTarget);
target.removeClass("changeColor");
}) ;
});
</script>
</body>
</html>