js怎么写一个对table的选择记录行的操作?

yeshucheng 个体 技术总监/研发总监  2006-07-06 02:49:10
对显示的记录选择后能高亮度显示,而且可以把当前行的参数得到,并且把每行隔色显示
最好能有个通用的,样式里也行!!!
...全文
404 点赞 收藏 6
写回复
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
wideroad 2006-07-10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript" src="../shared/Common.js"></script>
</head>
<body>
<table id="myTable" style=" width:100%;">
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
<tr>
<td> 
</td>
<td> 
</td>
<td> 
</td>
</tr>
<tr>
<td style="height: 21px"> 
</td>
<td style="height: 21px"> 
</td>
<td style="height: 21px"> 
</td>
</tr>
</table>

</body>
</html>
<script type="text/javascript">
var myTable = $("myTable");

// 设置行的颜色
function setColor(table)
{
// 循环table
var bgColor = "#996633";
for(var i=0;i<table.rows.length;i++)
{
var row = table.rows[i];
bgColor = (bgColor=="#336699")?"#996633":"#336699";
row.style.backgroundColor = bgColor;
row.onclick = function()
{
var element = window.event.srcElement;
while(element.tagName != "TR")
{
element = element.parentNode;
}
alert(element.rowIndex);
};
}
}

setColor(myTable);
</script>
回复
lantersen 2006-07-10
你试试这吧,自己可以试着这样调:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> test </TITLE>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script type="text/javascript" language="javascript">
function changeit(id)
{
var node = document.getElementById(id);
var nodeid = parseInt(id.substr(2));
var sname = document.getElementById(id).getAttribute("className");

if ( nodeid%2 == 0)
{

if ( sname == "h2" )
{
node.setAttribute("className","h1");
}
else
{
node.setAttribute("className","h2");
}
}
else
{
if ( sname == "h3" )
{
node.setAttribute("className","h1");
}
else
{
node.setAttribute("className","h3");
}
}
}
</script>
<style type="text/css">

.h1{
text-align:center;
background:#0099FF;
cursor:hand;
}
.h2{
text-align:center;
background:#33CC00;
cursor:hand;
}
.h3{
text-align:center;
background:#FF3333;
cursor:hand;
}
</style>
</HEAD>

<BODY>
<TABLE width="60%" align="center" border="1" cellpadding="1" cellspacing="1">
<TR id="tr1" onclick="changeit('tr1')" class="h1">
<TD>aaa</TD>
</TR>
<TR id="tr2" onclick="changeit('tr2')" class="h1">
<TD>aaa</TD>
</TR>
<TR id="tr3" onclick="changeit('tr3')" class="h1">
<TD>aaa</TD>
</TR>
<TR id="tr4" onclick="changeit('tr4')" class="h1">
<TD>aaa</TD>
</TR>
</TABLE>
</BODY>
</HTML>
回复
yeshucheng 2006-07-06
先谢谢楼上两位,还有怎么记录隔色显示呢?
比如奇数显示一种颜色,偶数是另一种颜色
回复
lantersen 2006-07-06
不知这样是你想要的?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> test </TITLE>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script type="text/javascript" language="javascript">
function changeit(id)
{
var node = document.getElementById(id);
var sname = document.getElementById(id).getAttribute("className");
if ( sname=="h2" )
{
node.setAttribute("className","h1");
}
else
{
node.setAttribute("className","h2");
}
}
</script>
<style type="text/css">

.h1{
text-align:center;
background:#0099FF;
cursor:hand;
}
.h2{
text-align:center;
background:#33CC00;
cursor:hand;
}
</style>
</HEAD>

<BODY>
<TABLE width="60%" align="center" border="1" cellpadding="1" cellspacing="1">
<TR id="tr1" onclick="changeit('tr1')" class="h1">
<TD>aaa</TD>
</TR>
<TR id="tr2" onclick="changeit('tr2')" class="h2">
<TD>aaa</TD>
</TR>
<TR id="tr3" onclick="changeit('tr3')" class="h1">
<TD>aaa</TD>
</TR>
</TABLE>
</BODY>
</HTML>
回复
JK_10000 2006-07-06
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script language=javascript>
var selectedTr=null;

function c1(obj){
obj.style.background='blue'; //把点到的那一行变希望的颜色;
if(selectedTr!=null) selectedTr.style.removeAttribute("backgroundColor");
if(selectedTr==obj) selectedTr=null;//加上此句,以控制点击变白,再点击反灰
else selectedTr=obj;
}

</script>
</head>

<body>
单击选中Tr,高亮显示,再单击取消选选中。<input type=button value="选中的是哪一行?" onclick="alert(selectedTr?selectedTr.outerHTML:'没有选中行');">
<table width="100%" border="1" cellspacing="0" cellpadding="0" >
<tr onclick="c1(this);" bgcolor="#cccccc">
<td >1 </td>
</tr>
<tr onclick="c1(this);" bgcolor="#e0e0e0">
<td >2 </td>
</tr>
<tr onclick="c1(this);" bgcolor="#cccccc">
<td >3 </td>
</tr>
<tr onclick="c1(this);" bgcolor="#e0e0e0">
<td >4 </td>
</tr>
<tr onclick="c1(this);" bgcolor="#cccccc">
<td >5 </td>
</tr>
</table>
</body>
</html>
回复
yeshucheng 2006-07-06
自己顶!
回复
发动态
发帖子
JavaScript
创建于2007-09-28

8.4w+

社区成员

Web 开发 JavaScript
申请成为版主
社区公告
暂无公告