[英]Unable to get value of dynamically generated cell using document.getElementById
I am adding rows to an HTML table which already has 2 rows, using below javascript code: 我使用下面的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);
}
But when I use below code to get value of dynamically added cells it says that document.getElementById()
is null inside for
loop. 但是,当我使用下面的代码获取动态添加的单元格的值时,它说
document.getElementById()
在for
循环内for
null。 It works for cells added by HTML code. 它适用于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);
}
Please suggest any solution or let me know if I am doing some mistake. 请提出任何解决方案,或者如果我做错了,请告诉我。
The problem is how is are creating the id
for the dynamic elements. 问题是如何为动态元素创建
id
。
You are using numeric subtraction along with string concatenation like element2.id="wall"+rowCount-2+"2";
您正在使用数字减法以及字符串连接,例如
element2.id="wall"+rowCount-2+"2";
which is wrong. 这是错误的。
You need to separate the numerical computation out as a separate unit, else "wall"+rowCount
will get processed with will give wall2
then 'wall2' - 1
will be NaN
since one operand is not a number so the end result will be something like NaN2
您需要将数值计算分离为一个单独的单位,否则将使用
"wall"+rowCount
进行处理,将得到wall2
然后是'wall2' - 1
将为NaN
因为一个操作数不是数字,因此最终结果将类似于NaN2
element2.id="wall"+(rowCount-2)+"2";
Since you are using the rowCount-2
value in multiple places, use a variable 由于您在多个位置使用
rowCount-2
值,因此请使用一个变量
var idCounter = rowCount - 2;
then 然后
element0.id = "wall" + idCounter + "0";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.