JavaScript高手请进，关于上下移动选择行的问题

各位虾哥快救我，小弟想实现如下功能，不知杂弄。我有一个页面(a.jsp)上有一个文本框text,当我在text里输入助记码后用showModalDialog的方式打开另一... 各位虾哥快救我，小弟想实现如下功能，不知杂弄。
我有一个页面(a.jsp)上有一个文本框text,当我在text里输入助记码后用showModalDialog的方式打开另一个页面(b.jsp),我在b页面上根据传过来的助记码从数据库里提取，比如有n条记录显示在表格里，我现在想用键盘的上下键选择表格里的某一行（当某一行被选择时加以标识，如：改变其背景颜色等），然后按回车将记录返回给a页面的文本框！
各位虾哥：
不知是否小弟没表达清楚，我的最终目的是想用键盘上、下键选择表格中某一行的内容，当在上下选择某一行时用一种方式(如:改变其背景颜色等)标识其被选择或该行获得焦点！展开

 我来答

4个回答

#热议# 为什么说不要把裤子提到肚脐眼？

冷夜微风
2008-05-17 · TA获得超过161个赞

知道小有建树答主

回答量：84

采纳率：0%

帮助的人：58.1万

我也去答题访问个人页

关注

展开全部

楼主我看了你的要求给你做了一个html的静态例子作参考，有些地方你要根据具体的情况改成动态的。因为工作忙赶时间所以有些地方做的不是太好你要自己来斟酌~~~~呵呵，体会精神。

回答补充：楼主，我给你的例子里有键盘上、下键选择表格中某一行的内容的功能。你试一试。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script language="JavaScript" type="text/javascript">
function showSubWindow() {
vReturnValue = window.showModalDialog("b.html",fm,"status:false; dialogHeight:500px; dialogWidth:600px;");
}
</script>
</HEAD>

<BODY>
<form name="fm">
<input name="text1" type="text" value="123456">
<input name="text2" type="text">
<input name="button" type="button" onClick="showSubWindow();" value="showSubWindow">
</form>
</BODY>
</HTML>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<script language="JavaScript" type="text/javascript">
function showNum() {
document.getElementById("num").innerHTML = window.dialogArguments.text1.value;
}

function showSelected() {
var nowLineNum = document.fm.nowLineNum.value;
if(nowLineNum == ''){
window.dialogArguments.text2.value='no selected!!';
} else {
window.dialogArguments.text2.value=document.getElementById("hiddenLine" + nowLineNum).value;
}
window.close();
}

function lineClick(lineNum){
var nowLineNum = document.fm.nowLineNum.value;
if(nowLineNum != ''){
document.getElementById("tr" + nowLineNum).bgColor='#FFFFFF';
}
document.getElementById("tr" + lineNum).bgColor='#FFFF00';
document.fm.nowLineNum.value = lineNum;
}

function keyDown() {
if (event.keyCode == '13') {
showSelected();
}
var nowLineNum = document.fm.nowLineNum.value;
var maxLine = 5;
if (event.keyCode == '38') {
if (nowLineNum == ''){
lineClick(maxLine);
} else if(nowLineNum != '1'){
lineClick(parseInt(nowLineNum) - 1);
}
}
if (event.keyCode == '40') {
if (nowLineNum == ''){
lineClick(1);
} else if(nowLineNum != maxLine){
lineClick(parseInt(nowLineNum) + 1);
}
}
}
</script>
</HEAD>

<BODY onload="showNum();" onkeydown="keyDown();">
<form name="fm">
<input name="nowLineNum" type="hidden">
<div id="num"></div>
<div style="width: 400px; height: 300px; z-index:1; visibility: visible; overflow: scroll">
<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#CCCCCC" bordercolorlight="#CCCCCC">
<tr bgcolor="#999999">
<td width="60" align="center"><font style="font-size: 12pt; font-weight: bold;">AAAAAAAA</font></td>
<td width="60" align="center"><font style="font-size: 12pt; font-weight: bold;">BBBBBBBB</font></td>
<td width="60" align="center"><font style="font-size: 12pt; font-weight: bold;">CCCCCCCC</font></td>
</tr>
<tr id="tr1" border= "1" onClick="lineClick(1);">
<td align="center">1111</td>
<td align="center">1111</td>
<td align="center">1111</td>
<input name="hiddenLine1" type="hidden" value="1111">
</tr>
<tr id="tr2" border= "1" onClick="lineClick(2);">
<td align="center">2222</td>
<td align="center">2222</td>
<td align="center">2222</td>
<input name="hiddenLine2" type="hidden" value="2222">
</tr>
<tr id="tr3" border= "1" onClick="lineClick(3);">
<td align="center">3333</td>
<td align="center">3333</td>
<td align="center">3333</td>
<input name="hiddenLine3" type="hidden" value="3333">
</tr>
<tr id="tr4" border= "1" onClick="lineClick(4);">
<td align="center">4444</td>
<td align="center">4444</td>
<td align="center">4444</td>
<input name="hiddenLine4" type="hidden" value="4444">
</tr>
<tr id="tr5" border= "1" onClick="lineClick(5);">
<td align="center">5555</td>
<td align="center">5555</td>
<td align="center">5555</td>
<input name="hiddenLine5" type="hidden" value="5555">
</tr>
</table>
</div>
<input name="button" type="button" onClick="showSelected();" value="showSelectedValue">
</form>
</BODY>
</HTML>

本回答由提问者推荐

已赞过 已踩过<

评论收起

百度网友32cdd9945
2008-05-12 · TA获得超过1374个赞

知道大有可为答主

回答量：2429

采纳率：100%

帮助的人：1929万

我也去答题访问个人页

关注

展开全部

我自己也写了一个，参照了楼上个人的实现。
yb1111 的方法在 firefox下面应该不行的。

----------------index.htm-------------------------------
<!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" xml:lang="zh-CN" lang="zh-CN">

<head>
<style type="text/css">

</style>
</head>
<script>
function showWindow1 ()
{

window.open("./1.htm",'_blank' ,"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no") ;
// window.open("./1.htm",'_blank' ) ;
}
function showWindow2 ()
{
window.showModalDialog("./1.htm", document.myform, "dialogHeight:300px; dialogLeft:200px;");
}
</script>

<form name = "myform">
<input type=text value="哈哈哈" id = "inputCtrl" name = "textbox1">
<br>
利用 window.open 的方法，Firefox也支持
<input type=button value= "选择" onclick ="showWindow1()">
<br>
利用 window.showModalDialog 的方法,但Firefox不支持
<input type=button value= "选择" onclick ="showWindow2()">

</form>
<html>

---------------1.htm------------------------------------------
<script type="text/javascript">
var selectTr = 0;
function SelectRow(selectedindex)
{
var datagrid=document.getElementById("selector");
var rows =datagrid.getElementsByTagName("TR");
if ( selectedindex < 0 || selectedindex > rows.length -1) return;

rows[selectTr].style.backgroundColor = "#ffffff";
rows[selectedindex].style.backgroundColor = "#00ccff";
selectTr = selectedindex;

}

function doSelect()
{
// alert(event.keyCode );
if( event.keyCode == 13)
{
// alert("您选中的行：" + selectTr.cells[2].innerText);
}

if ( event.keyCode ==38 )
{
SelectRow(selectTr-1);

}
if ( event.keyCode ==40 )
{
SelectRow(selectTr+1);
}

}

function MouseOver(tr){
tr.style.backgroundColor = "#ddefff";
var datagrid=document.getElementById("selector");
var rows =datagrid.getElementsByTagName("TR");
rows[selectTr].style.backgroundColor = "#00ccff";

}

function MouseOut(tr){
tr.style.backgroundColor = "#ffffff";
var datagrid=document.getElementById("selector");
var rows =datagrid.getElementsByTagName("TR");
rows[selectTr].style.backgroundColor = "#00ccff";
}

function GoBack()
{
var ddd =null;

if( window.opener ==null ){
ddd = window.dialogArguments.textbox1;
}else{
ddd= window.opener.document.getElementById("inputCtrl");
}

var datagrid=document.getElementById("selector");
var rows =datagrid.rows; //这样也可以的datagrid.getElementsByTagName("TR");
// ddd.value= rows[selectTr].cells[1].innerText ; FireFox没有这个属性
ddd.value= rows[selectTr].cells[1].innerHTML ;
window.close();
}
</script>

<body onkeydown="doSelect()" onload="SelectRow(3)">
<table id = "selector" border =1>
<tr onclick="SelectRow(0)" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)" ><td width = 50>1</td> <td width = 200>哈哈</td></tr>
<tr onclick="SelectRow(1)" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)" > <td>2</td> <td>嘻嘻</td></tr>
<tr onclick="SelectRow(2)" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)" > <td>3</td> <td>嘿嘿</td></tr>
<tr onclick="SelectRow(3)" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)" > <td>4</td> <td>呵呵</td></tr>
<tr onclick="SelectRow(4)" onmouseover="MouseOver(this)" onmouseout="MouseOut(this)" ><td>5</td> <td>啊啊</td> </tr>

</table>

<input type= button value= "返回" onclick ="GoBack()" >
</body>

已赞过 已踩过<

评论收起

apollo47
2008-05-12 · TA获得超过1451个赞

知道小有建树答主

回答量：810

采纳率：0%

帮助的人：537万

我也去答题访问个人页

关注

展开全部

<html>
<body>
<table border='1'>
<tr onmouseover="doMouseOver(this)" onmouseout="doMouseOut(this)">
<td>1</td> <td>fdasfasd</td> <td>fdsafasd</td>
</tr>
<tr onmouseover="doMouseOver(this)" onmouseout="doMouseOut(this)">
<td>2</td> <td>fffffffffffff</td> <td>dddddddddddd</td>
</tr>
<tr onmouseover="doMouseOver(this)" onmouseout="doMouseOut(this)">
<td>3</td> <td>fsdafdsafasdfa</td> <td>ffffffffffff</td>
</tr>

</table>
</body>
</html>
<script language="JavaScript">
var selectTr = null;
function doMouseOver(tr){
tr.bgColor="red";
selectTr = tr;
}

function doMouseOut(tr){
tr.bgColor="white";
selectTr = null;
}

function doSelect(){
if(selectTr != null || event.keyCode == 13){
alert("您选中的行：" + selectTr.cells[0].innerText);
}
}

document.body.onkeydown = doSelect;
</script>

已赞过 已踩过<

评论收起

yaohang1982
2008-05-12 · TA获得超过101个赞

知道答主

回答量：312

采纳率：0%

帮助的人：162万

我也去答题访问个人页

关注

展开全部

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

JavaScript高手请进，关于上下移动选择行的问题

其他类似问题

为你推荐：