单击选中行

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
  <title> New Document </title>
  <style>
  #otbl{
width:200px;
height:100px;
border:1px solid #C0C0C0;
text-align:center;
font-size:9pt;
border-collapse:collapse
  }
  #otbl td{
border:1px solid #C0C0C0;
  }
  </style>
  <script language="JavaScript">
  
  </script>
</head> <body>
  <table id="otbl" class="otable">
  <tr>
<td> </td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
  </tr>
  <tr onclick="show(this)">
<td><input type="checkbox" name="chk"></td>
<td>Tom</td>
<td>22</td>
<td>男</td>
  </tr>
  <tr onclick="show(this)">
<td><input type="checkbox" name="chk"></td>
<td>Tony</td>
<td>23</td>
<td>女</td>
  </tr>
  </table>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<table>
<tr><th></th><th>Name</th><th>Tel</th><th>Fax</th></tr>
<tr onclick="this.style.backgroundColor=this.cells[0].firstChild.checked?'#000':'#fff'"><td><input type=checkbox /></td><td>a</td><td>a</td><td>a</td></tr>
</table>
<%@ Page language="c#" Codebehind="WebForm7.aspx.cs" AutoEventWireup="false" Inherits="test.WebForm7" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm7</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script language=javascript>
function SelectClick()
{
var oRow = null; //保存行对象
var oNode = event.srcElement; //保存触发该事件的对象

if(oNode.tagName == "TD") //如果在表格中单击的是单元格，则触发该事件的就是该单元格(tagName为对象的标签类型)
{
oRow = oNode.parentNode; //由于是单元格，所以它对应的行对象就它的父节点
}
else if(oNode.tagName == "A" || oNode.tagName == "INPUT" || oNode.tagName == "FONT" || oNode.tagName == "SPAN")//如果在表格中单击的是单元格中对应的对象，则触发该事件的就是该单元格中的这些对象
{
oRow = oNode.parentNode.parentNode; //由于是单元格中的对象，所以它的父节点是单元格，单元格的父节点才是行
}
else
{
return; //如果点的是另外的地方(表格中有可能点到表格对象，如果点到的是表格对象则不能获取到想要删除的行的索引，所以不能删除)
}

if(oRow.rowIndex > 0) //如果不是表头，则进行背景颜色设置
{
var oTable = oRow.parentNode; //获取表对象
var iRowCount = oTable.rows.length; //获取表的行数

for(var i=0 ; i<iRowCount ; i++) //将已经设置背景的行的背景色去掉
{
if(oTable.rows[i].style.backgroundColor == "#ccffcc")//如果已经设置了背景色
{
oTable.rows[i].style.backgroundColor = "";//去掉背景色，style表示的是HTML中对象的样式，backgroundColor只是style中的一个样式，还有如:display等
oTable.rows[i].cells[0].childNodes[0].checked = false;
break;
}
}
oRow.style.backgroundColor = "#ccffcc";//设置当前选择行的背景色
oRow.cells[0].childNodes[0].checked = true;
}
}
</script>
</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="宋体">
<TABLE id="tbInfo" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 8px" onclick="SelectClick()"
cellSpacing="0" cellPadding="0" width="100%" align="center" border="0">
<TR>
<TD id="No" vAlign="middle" noWrap align="center" bgColor="darkgray"></TD>
<TD id="Name" vAlign="middle" noWrap align="center" bgColor="darkgray">Name</TD>
<TD vAlign="middle" noWrap align="center" bgColor="#a9a9a9">Tel</TD>
<TD id="Sex" vAlign="middle" noWrap align="center" bgColor="darkgray">Fax</TD>
</TR>
<TR>
<TD noWrap align="center"><INPUT type="checkbox"></TD>
<TD noWrap align="center">test1</TD>
<TD noWrap align="center">123456</TD>
<TD noWrap align="center">123456</TD>
</TR>
<TR>
<TD noWrap align="center"><INPUT type="checkbox"></TD>
<TD noWrap align="center">test2</TD>
<TD noWrap align="center">123456</TD>
<TD noWrap align="center">123456</TD>
</TR>
<TR>
<TD noWrap align="center"><INPUT type="checkbox"></TD>
<TD noWrap align="center">test3</TD>
<TD noWrap align="center">123456</TD>
<TD noWrap align="center">123456</TD>
</TR>
<TR>
<TD noWrap align="center"><INPUT type="checkbox"></TD>
<TD noWrap align="center">test4</TD>
<TD noWrap align="center">123456</TD>
<TD noWrap align="center">123456</TD>
</TR>
</TABLE>
</FONT>
</form>
</body>
</HTML>
1楼的方法很好，我本来还想着给checkbox编号，呵呵