为什么我在动态增加的TR上附加onKeyDown事件总是不成功?请大侠看看!
foncy 2003-08-22 02:25:39 代码如下(拷贝至本地保存为HTML就可见效果):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
var CurrentRow = null ;
function SelectRow(row)
{
if (CurrentRow != null)
{
CurrentRow.className = "UnSelected" ;
}
CurrentRow = row ;
row.className = "Selected" ;
}
function ChangeRow()
{
var keyCode = event.keyCode ;
var obj ;
if (CurrentRow == null)
return ;
if (keyCode == 13)
{
// 回车
CurrentRow.fireEvent("onDblClick") ;
return false;
}
if (keyCode == 38)
{
// 向上
obj = CurrentRow.previousSibling ;
}
if (keyCode == 40)
{
// 向下
obj = CurrentRow.nextSibling ;
}
// 表的第一个子项是表头,必须排除
if (obj != null && obj.rowIndex !=0)
{
obj.setActive() ;
obj.fireEvent("onActivate") ;
obj.focus() ;
}
}
function createRows()
{
var oRow = oTable.insertRow(oTable.rows.length);
//--------附加事件代码是否正确?-
oRow.attachEvent("onActivate",new Function("SelectRow(this)"));
oRow.attachEvent("onKeyDown",new Function("ChangeRow()"));
//----------------------------
var aRows = oTable.rows;
for(var i = 0;i < oTable.rows(0).cells.length;i++)
{
var aCells = oRow.cells;
var oCell = aRows(oRow.rowIndex).insertCell(aCells.length);
oCell.innerHTML = " ";
oCell.Class = "Mytd";
}
}
function removeRows()
{
}
</script>
<style type="text/css">
<!--
th {
font-family: "宋体";
font-size: 9pt;
font-weight: normal;
background-color: #C6DFC1;
border: 1px solid;
border-bottom-width: 1px;
border-bottom-color: #666666;
border-left-width: 1px;
border-left-color: #FFFFFF;
border-right-width: 1px;
border-right-color: #000000;
border-top-width: 1px;
border-top-color: #FFFFFF;
height: 18px;
}
.Mytd {
border: 1px ridge;
border-bottom-width: 1px;
border-bottom-color: #666666;
border-left-width: 0px;
border-left-color: #666666;
border-right-width: 1px;
border-right-color: #666666;
border-top-width: 0px;
border-top-color: #666666;
font-family: "宋体";
font-size: 9pt;
text-align: left;
vertical-align: middle;
text-indent: 2px;
height: 15px;
}
.Mytable {
border: 1px ridge;
border-bottom-width: 0px ;
border-bottom-color: #666666 ;
border-left-width: 1px ;
border-left-color: #000000 ;
border-right-width: 0px ;
border-right-color: #666666 ;
border-top-width: 1px ;
border-top-color: #000000 ;
}
.Selected { background-color: #000000; color:#FFFFFF ;}
.UnSelected { background-color: #FFFFFF;}
-->
</style>
</head>
<body>
<table width="75%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td>
<table width="75%" border="0" align="center" cellpadding="0" cellspacing="0" class="Mytable" style="word-break:keep-all;" id="oTable">
<tr>
<th width="34">姓名</th>
<th width="32">学号</th>
<th width="33">班级</th>
</tr>
<tr onActivate="SelectRow(this);" onKeyDown="return ChangeRow();" class="Mytd">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr onActivate="SelectRow(this);" onKeyDown="return ChangeRow();" class="Mytd">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table><input name="hidTable" type="hidden"></td>
</tr>
<tr>
<td align="center"><input type="button" value="createRows" onClick="JavaScript:createRows()"> <input type="button" value="removeRows"></td>
</tr>
</table>
</body>
</html>