动态增多的行(table)，事件只对第一行起作用
日期：2014-05-18 浏览次数：20775 次
动态增加的行(table)，事件只对第一行起作用？
以下是我的源文件。
一个表格有四列，c1,c2,c3,c4，点击按钮 addOnerow 后，新增一空白行，光标从c3列移出后，列c4的内容＝c1+c2+c3,这是设计的初衷，
可结果不是这样，如果只增加一行，没有问题，可如果多增加几行，则只有第一行的onBlur起作用，如果先在后面的行点击后再回到第一行，则
第一行的onBlur也没有任何反应了。
请问错在哪里？怎么修改？
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>Add One Row</title>
</head>
<body bgcolor="#d6e2ce" >
<table border="1">
<tr>
<td>
<input name="cnt" type="text" value="">
<form name ="form1" method="post" action="addrow.jsp">
<p>
<input type="button" value="AddOneRow" onclick="addOneRow()">
<input type="button" value="Exit" onclick="window.close()">
</p>
<table width=100%>
<tr>
<td width=2>c1</td>
<td width=2>c2</td>
<td width=2>c3</td>
<td width=2>c4</td>
</tr>
</table>
<div>
<table border=0 width=100%>
<tbody id="rowDetail">
</tbody>
</table>
</div>
</form>
<div style="{visibility:hidden}">
<table border=1 width=100%>
<tbody id="rowModule">
<tr>
<input type="text" size="2" name="c1">
<input type="text" size="2" name="c2">
<input type="text" size="2" name="c3" onBlur="form1.c4.value=form1.c1.value*1+form1.c2.value+form1.c3.value;">
<input type="text" size="2" name="c4">
</tr>
</tbody>
</table>
</div>
</td>
<tr>
</table>
</body>
</html>
<script language=javascript>
function addOneRow(afterRowIndex)
{
//alert("be about to add one row");
var alltbDetailUsed= document.all("rowDetail").rows;
var newRow = document.all("rowModule").rows[0].cloneNode(true);
document.all("rowDetail").insertBefore(newRow);
}
</script>
------解决方案--------------------
onBlur="form1.c4.value=form1.c1.value*1+form1.c2.value+form1.c3.value;"
这句话有错
因为如果是一行的话，你的没有问题，如果是多行，则form1.c4之类的，就存在多个同名变量，需要用数组表示了，则
需要表示为form1.c4[i].value=form1.c1[i].value*1+form1.c2[i].value+form1.c3[i].value;
具体i的值，需要你自己控制了，呵呵，我就不多说了，
------解决方案--------------------
你那些个 对象是 名字相同了，并不是 数组，所以你那么改不对啊，
以下是我的源文件。
一个表格有四列，c1,c2,c3,c4，点击按钮 addOnerow 后，新增一空白行，光标从c3列移出后，列c4的内容＝c1+c2+c3,这是设计的初衷，
可结果不是这样，如果只增加一行，没有问题，可如果多增加几行，则只有第一行的onBlur起作用，如果先在后面的行点击后再回到第一行，则
第一行的onBlur也没有任何反应了。
请问错在哪里？怎么修改？
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>Add One Row</title>
</head>
<body bgcolor="#d6e2ce" >
<table border="1">
<tr>
<td>
<input name="cnt" type="text" value="">
<form name ="form1" method="post" action="addrow.jsp">
<p>
<input type="button" value="AddOneRow" onclick="addOneRow()">
<input type="button" value="Exit" onclick="window.close()">
</p>
<table width=100%>
<tr>
<td width=2>c1</td>
<td width=2>c2</td>
<td width=2>c3</td>
<td width=2>c4</td>
</tr>
</table>
<div>
<table border=0 width=100%>
<tbody id="rowDetail">
</tbody>
</table>
</div>
</form>
<div style="{visibility:hidden}">
<table border=1 width=100%>
<tbody id="rowModule">
<tr>
<input type="text" size="2" name="c1">
<input type="text" size="2" name="c2">
<input type="text" size="2" name="c3" onBlur="form1.c4.value=form1.c1.value*1+form1.c2.value+form1.c3.value;">
<input type="text" size="2" name="c4">
</tr>
</tbody>
</table>
</div>
</td>
<tr>
</table>
</body>
</html>
<script language=javascript>
function addOneRow(afterRowIndex)
{
//alert("be about to add one row");
var alltbDetailUsed= document.all("rowDetail").rows;
var newRow = document.all("rowModule").rows[0].cloneNode(true);
document.all("rowDetail").insertBefore(newRow);
}
</script>
------解决方案--------------------
onBlur="form1.c4.value=form1.c1.value*1+form1.c2.value+form1.c3.value;"
这句话有错
因为如果是一行的话，你的没有问题，如果是多行，则form1.c4之类的，就存在多个同名变量，需要用数组表示了，则
需要表示为form1.c4[i].value=form1.c1[i].value*1+form1.c2[i].value+form1.c3[i].value;
具体i的值，需要你自己控制了，呵呵，我就不多说了，
------解决方案--------------------
你那些个 对象是 名字相同了，并不是 数组，所以你那么改不对啊，
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
