gridview如何加入方向键盘选择然后回车选中数据？用js可以加上方向键选择，但是回车如何得到选中行的某列值？
先写个行操作方向键的
- HTML code
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
.lightrow{color:red;}
</style>
<script language="javascript">
var lightCss = "lightrow";
var curRow = null;
function keyDown()
{
var key = event.keyCode;
var obj = curRow;
switch(key)
{
case 13://Enter key
obj.cells[0].childNodes[0].checked = !obj.cells[0].childNodes[0].checked;
alert("current RowIndex:"+obj.rowIndex+"\nID:"+obj.cells[1].innerText)
break;
case 38://up key
if(obj.rowIndex>1)
{
curRow.className = "";
curRow=obj.previousSibling;
curRow.className = lightCss;
}
break;
case 40://down key
if(obj.rowIndex<obj.parentNode.rows.length-1)
{
curRow.className = "";
curRow=obj.nextSibling;
curRow.className = lightCss;
}
break;
}
}
document.onkeydown=keyDown;
window.onload=function()
{
var tbl = document.getElementById("tbl");
curRow = tbl.rows[1];
curRow.className = lightCss;
};
</script>
</head>
<body>
<table width="300px" style="background-color:#000" border="0" id="tbl" cellpadding=0 cellspacing=1>
<tr style="background-color:#fff">
<th></th>
<th>ID</th>
<th>NAME</th>
</tr>
<tr style="background-color:#fff">
<td><input type="checkbox" /></td>
<td>1</td>
<td>a1</td>
</tr>
<tr style="background-color:#fff">
<td><input type="checkbox" /></td>
<td>2</td>
<td>a2</td>
</tr>
<tr style="background-color:#fff">
<td><input type="checkbox" /></td>
<td>3</td>
<td>a3</td>
</tr>
</table>
</body>
</html>
2.
<html>
<head>
<style>
.lightrow{color:red;}
</style>
<script language="javascript">
var lightCss = "lightrow";
var curRow = null;
function keyDown()
{
var key = event.keyCode;
var obj = event.srcElement;
switch(key)
{
case 13://Enter key
obj.select();
if(typeof obj.value!="undefined")alert(obj.value);
break;
case 37://left key
if(obj.parentNode.previousSibling!=null)
{
if(obj.parentNode.previousSibling.childNodes.length>0)
{
obj.parentNode.previousSibling.childNodes[0].focus();
}
}
break;
case 38://up key
setFocus(obj,0);
break;
case 39://right key
if(obj.parentNode.nextSibling!=null)
{
if(obj.parentNode.nextSibling.childNodes.length>0)
{
obj.parentNode.nextSibling.childNodes[0].focus();
}
}
break;
case 40://down key
setFocus(obj,1);
break;
}
}
function setFocus(obj,flag)
{
var tbl=document.getElementById("tbl");
var rowIdx=obj.parentNode.parentNode.rowIndex;
var cellIdx=obj.parentNode.cellIndex;
if(flag==0)//up
{
if(rowIdx>1)
{
var cell = tbl.rows[rowIdx-1].cells[cellIdx];
if(cell.childNodes.length>0)
{
cell.childNodes[0].focus();
}
}
}else
{
if(rowIdx<tbl.rows.length-1)
{
var cell = tbl.rows[rowIdx+1].cells[cellIdx];
if(cell.childNodes.length>0)
{
cell.childNodes[0].focus();
}
}
}
}
window.onload=function()
{
var tbl=document.getElementById("tbl");
if(tbl.rows.length>1)
{
if(tbl.rows[1].cells[0].childNodes.length>0)
{
var stFocus = tbl.rows[1].cells[0].childNodes[0];
if(stFocus!=null)stFocus.focus();
}
}
};
</script>
</head>
<body>
<table width="300px" style="background-color:#000" border="0" id="tbl" cellpadding=0 cellspacing=1>
<tr style="background-color:#fff">
<th>ID</th>
<th>NAME</th>
<th>DESC</th>
</tr>
<tr style="background-color:#fff">
<td><input type="text" value="1" onkeydown="keyDown()"/></td>
<td><input type="text" value="a1"onkeydown="keyDown()" /></td>
<td><input type="text" value="aaaaaaaaaaaa" onkeydown="keyDown()"/></td>
</tr>
<tr style="background-color:#fff">
<td><input type="text" value="2" onkeydown="keyDown()"/></td>
<td><input type="text" value="a2" onkeydown="keyDown()"/></td>
<td><input type="text" value="bbbbbbbbbbbbb" onkeydown="keyDown()"/></td>
</tr>
<tr style="background-color:#fff">
<td><input type="text" value="3" onkeydown="keyDown()"/></td>
<td><input type="text" value="a3" onkeydown="keyDown()"/></td>
<td><input type="text" value="ccccccccccccc" onkeydown="keyDown()"/></td>
</tr>
</table>
</body>
</html>
