为什么我在动态增加的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">

</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>

...全文

83 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

foncy 2003-08-29

打赏
举报

还是不行！！有没有哪位大哥调试成功过？

yonghengdizhen 2003-08-28

打赏
举报

事件函数中不要使用this,而是用event.srcElement替代

guliang 2003-08-28

打赏
举报

根据我的经验，不要在动态附加的响应函数里加this参数，因为这时传入的this并不代表你认为的td对象，而是函数内部的this对象。
建议使用id代替this。

foncy 2003-08-28

打赏
举报

我是指我新增加的行没有附加上
SelectRow(this)
ChangeRow()
两个FUNCTION啊

yonghengdizhen 2003-08-22

打赏
举报

事实上你的附加已经成功了.但是可能因为你对事件的理解上的误解,导致程序并没有达到你预想的要求.
所以建议去msdn查看事件的参考文档.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
var CurrentRow = null ;
function SelectRow(row)
{
alert("DDDDDDD")
if (CurrentRow != null)
{
CurrentRow.className = "UnSelected" ;
}
CurrentRow = row ;
row.className = "Selected" ;
}

function ChangeRow()
{
alert("EEEEEEE")
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">

</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>

cloudchen 2003-08-22

打赏
举报

四种方法，自己逐个试试

<table id="t" border="1">
<tr><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
var t = document.getElementById("t");
for (var i=0;i<t.rows.length;i++) {
// t.rows[i].firstChild.attachEvent("onclick",test);
// t.rows[i].firstChild.onclick = function() {test(",cloudchen")}
// t.rows[i].firstChild.onclick = test;
t.rows[i].firstChild.attachEvent("onclick",new Function("test(',cloudchen')"));
}
function test() {
var attach=arguments.length>0?arguments[0]:"";
alert("test"+attach);
}
</SCRIPT>

JK_10000 2003-08-22

打赏
举报

可能是attachevent对tr失效了.
用以下代码可行

oRow.attachEvent("onKeyDown",new Function("ChangeRow()"));

--->>>

oRow.onkeydown=ChangeRow;

foncy 2003-08-22

打赏
举报

这种？
不行的啊！！

oRow.attachEvent("onactivate",function(){SelectRow(this);});
oRow.attachEvent("onkeydown",function(){return ChangeRow();});

foncy 2003-08-22

打赏
举报

不行啊，谁调试成功过！！！动态增加的行支持那个键盘事件！！

zmy0611 2003-08-22

打赏
举报

oRow.attachEvent("onKeyDown",ChangeRow);

cloudchen 2003-08-22

打赏
举报

循环给每个tr添加事件触发
oRow[i].attachEvent()

foncy 2003-08-22

打赏
举报

我的意思不仅仅KEYDOW不行
这下面的事件都附加不上去

//--------附加事件代码是否正确？-
oRow.attachEvent("onActivate",new Function("SelectRow(this)"));
oRow.attachEvent("onKeyDown",new Function("ChangeRow()"));
//----------------------------

cloudchen 2003-08-22