如何用JS写一个“下一行”按钮代码？？在线等！！！！！！！！！！！！！

比如在一个表格上先用鼠标选中一行，那被选中的那一行会先变颜色，
然后点击“下一行”按钮刚才被选中的下一行就会被选中。。
如何用JS写这个按钮呢？

解决方案 »

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

没人回答的时候要耐心，CSDN高手无限多。
这么说才不会有人跑来回答你的……
可以用
nextSibling
和
previousSibling
属性。。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script>
var curObj= null;
var i=0;
function setSelectedBgColor()
{
if(window.event.srcElement.tagName=='TD'){
if(curObj!=null) curObj.style.background='';
curObj=window.event.srcElement.parentElement;
curObj.style.background='#ffdead';
   }
  }

   function NextSelected(num)
   {
if (i>0 )
{
document.all.tags("tr")[i-1].style.background="";
}
if (i>=num)
{
i=0;
}
document.all.tags("tr")[i].style.background='#ffdead'; i=i+1;
   }
</script>
</head>
<body>
<TABLE id="Table1" style="WIDTH: 312px; HEIGHT: 80px" cellSpacing="1" cellPadding="1" width="312"
border="1" bordercolor="#b00c0" onclick="setSelectedBgColor();">
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
<TR>
<TD> </TD>
<TD> </TD>
<TD> </TD>
</TR>
</TABLE>
<INPUT id="Button1" type="button" value="next tr" name="Button1" onclick="NextSelected(document.all.tags('tr').length);">
</body>
</html>
容易的，俺也来贴一个<html>
<head>
<script language="javascript">var thisTr=null;
var nextTr=null;//将选择行时的处理加入onmousedown事件
function pageonload()
{
var trList= new Array(aaa,bbb,ccc)
for (var tr in trList)
{
var objtr=trList[tr];
objtr.attachEvent("onmousedown",onRowSelected);
}
}//选择后返回该行对象并设定背景颜色
function onRowSelected()
{ var objtr= window.event.srcElement
if(  objtr.id == "" ) objtr = window.event.srcElement.parentElement; setColor(objtr); thisTr=objtr;
}//
function otherRow()
{
//选择前按钮，结束处理
if(thisTr==null)
{
alert("Please select my Row!!!");
return;
} //判断当前行并设定该行的下一行
switch(thisTr.id)
{
case "aaa":
nextTr="bbb";
break;
case "bbb":
nextTr="ccc";
break;
case "ccc":
nextTr="aaa";
break;
default:
break;
}

//取得下一行对象并设定颜色
var objtr=document.getElementById(nextTr);
setColor(objtr); //保存当前行对象防止没有选择时对象不会空
thisTr=objtr;
}function setColor(objtr)
{
document.all.aaa.bgColor="white";
document.all.bbb.bgColor="white";
document.all.ccc.bgColor="white";
objtr.bgColor="red";}</script></head><body onload="pageonload()"><table id="ttt" border=1>
<tr id="aaa"><td >aaa</td></tr>
<tr id="bbb"><td>bbb</td></tr>
<tr id="ccc"><td>ccc</td></tr>
</table><input type="button" onclick="otherRow()">
</body></html>
楼上的写的比我简洁，不错。增加了几行每次点击或者选择时初期化的代码。
<script>
var curObj= null;
var i=0;
function setSelectedBgColor()
{

for (var m=0;m<document.all.tags('tr').length;m++)
{
document.all.tags("tr")[m].style.background='';
} if(window.event.srcElement.tagName=='TD')
{
if(curObj!=null) curObj.style.background='';
curObj=window.event.srcElement.parentElement;
curObj.style.background='#ffdead';
}
}function NextSelected(num)
{ for (var m=0;m<document.all.tags('tr').length;m++)
{
document.all.tags("tr")[m].style.background='';
} if (i>0 )
{
document.all.tags("tr")[i-1].style.background="";
}
if (i>=num)
{
i=0;
}
document.all.tags("tr")[i].style.background='#ffdead'; i=i+1;
}
</script>
重新写了一下，只增加了一个变量，这个程序就非常好看了，呵呵。<script>
var curObj= null;
var preObj=null;
var i=0;
function setSelectedBgColor()
{

if(window.event.srcElement.tagName=='TD')
{
if(curObj!=null) curObj.style.background='';
if(preObj!=null) preObj.style.background='';
curObj=window.event.srcElement.parentElement;//add
curObj.style.background='#ffdead';
}
}function NextSelected(num)
{ for (var m=0;m<document.all.tags('tr').length;m++)
{
document.all.tags("tr")[m].style.background='';
} if (i>0 )
{
document.all.tags("tr")[i-1].style.background="";
}
if (i>=num)
{
i=0;
}
preObj=document.all.tags("tr")[i];//edit
preObj.style.background='#ffdead';//edit i=i+1;
}
</script>
<html>
<head>
<style type="text/css">
.wc {
border-collapse:collapse;
border-left:#EEEEEE 1px solid;
border-top:#EEEEEE 1px solid;
}
.wc td {
height:24px;
width:100px;
border-right:#EEEEEE 1px solid;
border-bottom:#EEEEEE 1px solid;
}
</style>
<script type="text/javascript">
var TMove = function (o, n) {
this.parse = o;
this.index = o.rows[n == 0 ? n : o.rows.length - 1];
};
TMove.prototype = {
next : function () {
if (this.parse.rows.length == 0) return;
var o = this.index, n = this.index = o.nextSibling || this.parse.rows[0];
n.style.backgroundColor = "#F0F8FF";
o.style.backgroundColor = "";
},
previous : function () {
if (this.parse.rows.length == 0) return;
var o = this.index, n = this.index = o.previousSibling || this.parse.rows[this.parse.rows.length - 1];
n.style.backgroundColor = "#F0F8FF";
o.style.backgroundColor = "";
}
};
window.onload = function () {
var o1 = new TMove(document.getElementById("wc1"));
var o2 = new TMove(document.getElementById("wc2"), 0);
window.setInterval(function () {
o1.next();
o2.previous();
}, 300);
}
</script>
</head>
<body>
<table class="wc">
<tbody id="wc1">
  <tr>
<td></td>
<td></td>
<td></td>
  </tr>
  <tr>
<td></td>
<td></td>
<td></td>
  </tr>
  <tr>
<td></td>
<td></td>
<td></td>
  </tr>
</tbody>
</table>
<hr />
<table class="wc">
<tbody id="wc2">
  <tr>
<td></td>
<td></td>
<td></td>
  </tr>
  <tr>
<td></td>
<td></td>
<td></td>
  </tr>
  <tr>
<td></td>
<td></td>
<td></td>
  </tr>
</tbody>
</table>
</body>
我也写一个。。
^o^
楼上的这位兄弟，你说的那个NextSibling属性，俺怎么用不了阿？
我的NET Framework的版本已经是2。0版本了。
能举一个能用的例子看看吗？
TMove.prototype = {
$n : function (o) {
do {
o = o.nextSibling;
} while (o && o.nodeType == 3);
return o || null;
},
$p : function (o) {
do {
o = o.previousSibling;
} while (o && o.nodeType == 3);
return o || null;
},
next : function () {
if (this.parse.rows.length == 0) return;
var o = this.index, n = this.index = this.$n(o) || this.parse.rows[0];
n.style.backgroundColor = "#F0F8FF";
o.style.backgroundColor = "";
},
previous : function () {
if (this.parse.rows.length == 0) return;
var o = this.index, n = this.index = this.$p(o) || this.parse.rows[this.parse.rows.length - 1];
n.style.backgroundColor = "#F0F8FF";
o.style.backgroundColor = "";
}
};
可以了。。
to ls
这里已经表现的很清楚了啊。。
楼上的辛苦了。
看是看到了，在我的机器上没有能用起来。可能net frameword版本低缘故，因为这两个属性是2.0版本里才有的。
我这个最简洁:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD> <BODY >
<TABLE border=1 id='table'>
<TR onclick='first(this)'>
<TD>1</TD>
<TD>2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE><br>
<input type='button' value='selectNext' onclick='selectNext()'> </BODY>
</HTML>