87,907
社区成员
发帖
与我相关
我的任务
分享js怎么写一个对table的选择记录行的操作？
对显示的记录选择后能高亮度显示，而且可以把当前行的参数得到，并且把每行隔色显示
最好能有个通用的，样式里也行！！！
最好能有个通用的，样式里也行！！！
...全文
请发表友善的回复…
发表回复
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>
<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>
<!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>
<!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>
<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
- 打赏
- 举报
自己顶！
