<%@ page language="java" contentType="text/html; charset=euc-kr" %>
<html>
<head>
<title>키보드 방향키로 로우셀렉트하기</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<script language="javascript">
//현재 선택된 행 번호를 hidden에 넣어준다.
function setvalue(i) {
var obj = document.getElementById('num');
obj.value = i;
return false;
}
//행선택시 이벤트
function rValue(i) {
alert("선택행이벤트"+i);
}
//방향키로 행이동시 선택된 행번호를 가지는 변수
var y=0;
//방향기 행이동 이벤트
function teclaPulsada() {
//행(리스트) 전체 숫자에서 하나를 뺀다 (0부터 시작하게 때문에)
var listnum = 5;
switch (event.keyCode) {
case 40:
document.getElementById('tabla').rows[y].bgColor='#FFFFFF';
if (y==listnum){y=0;} else {y++;}
document.getElementById('tabla').rows[y].bgColor='#CC66FF';
setvalue(y);
break
case 38:
document.getElementById('tabla').rows[y].bgColor='#FFFFFF';
if (y==0){y=listnum;} else {y--;}
document.getElementById('tabla').rows[y].bgColor='#CC66FF';
setvalue(y);
break
}
}
//처음 로딩시 첫번째 행 자동선택되도록 하는 이벤트
function cambiarFondo() {
document.getElementById('tabla').rows[y].bgColor='#CC66FF';
}
</script>
</head>
<body onkeyup="teclaPulsada();" onload="cambiarFondo();" >
<form name="Accountinfo02" method="post" style="ime-mode:active;">
<!-- 현재 선택된 행번호 -->
<input type="hidden" id="num" name="num" value="0" readonly>
<table width="470" height="260" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align='left' class="msg"> ※ 선택하세요.</td>
</tr>
<tr>
<td valign="top">
<table width="100%" align="center" class="tblst">
<tr align="center" valign="middle">
<th width="40">순번</th>
<th width="100">아이디</th>
<th width="330">이름</th>
</tr>
</table>
<table width="100%" align="center" class="tblst" id="tabla">
<tr onClick="rValue(0);" style="cursor:hand">
<td width="40" align="center">1</td>
<td width="100" align="center">1111111</td>
<td width="316" align="center">1111111</td>
</tr>
<tr onClick="rValue(1);" style="cursor:hand">
<td width="40" align="center">2</td>
<td width="100" align="center">2222222</td>
<td width="316" align="center">22222222</td>
</tr>
<tr onClick="rValue(2);" style="cursor:hand">
<td width="40" align="center">3</td>
<td width="100" align="center">3333333</td>
<td width="316" align="center">3333333</td>
</tr>
<tr onClick="rValue(3);" style="cursor:hand">
<td width="40" align="center">4</td>
<td width="100" align="center">4444444</td>
<td width="316" align="center">4444444</td>
</tr>
<tr onClick="rValue(4);" style="cursor:hand">
<td width="40" align="center">5</td>
<td width="100" align="center">5555555</td>
<td width="316" align="center">5555555</td>
</tr>
<tr onClick="rValue(5);" style="cursor:hand">
<td width="40" align="center">6</td>
<td width="100" align="center">6666666</td>
<td width="316" align="center">6666666</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>