![](/img/trans.png)
[英]Accessing dynamically generated DIV using document.getElementByID
[英]Unable to get value of dynamically generated cell using document.getElementById
我使用下面的javascript代码将行添加到已经有2行的HTML表中:
<table id="dataTable" class="CSSTableGenerator">
<tbody>
<tr>
<td><label>No.of internal corners</label></td>
<td><input type="text" id="intCorner" class="corner"></td>
<td><label>No.of external corners</label></td>
<td><input type="text" id="extCorner" class="corner"></td>
</tr>
</tbody>
<tr>
<td><label>Wall 1</label></td>
<td><label>Wall 2</label></td>
<td><label>Wall 3</label></td>
<td><label>Wall 4</label></td>
</tr>
<tr>
<td><input type="text" id="wall00" class="wall"></td>
<td><input type="text" id="wall01" class="wall"></td>
<td><input type="text" id="wall02" class="wall"></td>
<td><input type="text" id="wall03" class="wall"></td>
</tr>
</tbody>
</table>
<input type="button" value="Add more walls" onclick="addRow('dataTable')">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell0 = row.insertCell(0);
var element0 = document.createElement("input");
element0.type = "text";
element0.name = "txtbox[]";
element0.className ="wall";
element0.id="wall"+rowCount-2+"0";
cell0.appendChild(element0);
var cell1 = row.insertCell(1);
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox[]";
element1.className ="wall";
element1.id="wall"+rowCount-2+"1";
cell1.appendChild(element1);
var cell2 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.className ="wall";
element2.id="wall"+rowCount-2+"2";
cell2.appendChild(element2);
var cell3 = row.insertCell(3);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
element3.className ="wall";
element3.id="wall"+rowCount-2+"3";
cell3.appendChild(element3);
}
但是,当我使用下面的代码获取动态添加的单元格的值时,它说document.getElementById()
在for
循环内for
null。 它适用于HTML代码添加的单元格。
function sumOppositeWalls(){
var table = document.getElementById('dataTable');
var rowCount = table.rows.length;
alert(rowCount);
var minusCount=0;
for(var i=0;i<rowCount-2;i++){
var wall1=parseFloat(document.getElementById('wall'+i+'0').value);
var wall2=parseFloat(document.getElementById('wall'+i+'1').value);
}
请提出任何解决方案,或者如果我做错了,请告诉我。
问题是如何为动态元素创建id
。
您正在使用数字减法以及字符串连接,例如element2.id="wall"+rowCount-2+"2";
这是错误的。
您需要将数值计算分离为一个单独的单位,否则将使用"wall"+rowCount
进行处理,将得到wall2
然后是'wall2' - 1
将为NaN
因为一个操作数不是数字,因此最终结果将类似于NaN2
element2.id="wall"+(rowCount-2)+"2";
由于您在多个位置使用rowCount-2
值,因此请使用一个变量
var idCounter = rowCount - 2;
然后
element0.id = "wall" + idCounter + "0";
演示: 小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.