无法使用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
循环中为空。它适用于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";
演示:Fiddle
相关文章:
- jQuery-通过AJAX调用动态添加具有值的表单元格
- 如何在单击单元格中的链接值时动态更改表行背景色
- 无法使用document.getElementById获取动态生成的单元格的值
- Javascript动态表,每个单元格都有一个onmouse事件
- 如何使用javascript从动态表中获取特定的单元格值
- 如何使用单击属性和工具提示动态创建表格单元格,该工具提示将超链接到页面
- 在动态表格单元格跨度中单击时更新一个权重值
- 如何在另一个java脚本函数中访问java脚本中动态html表中单元格的动态赋值
- 用户输入的动态表,单元格id作为网格引用
- jqgrid在条件下动态设置单元格可编辑false
- C#网格视图从动态创建的DataTable中实现可点击单元格
- 如何在 React 中将 html 表单元格数据动态插入到具有动态标题的表中
- (谷歌API)单元格引用中的动态工作表和工作表创建脚本的名称
- Javascript- 将点击事件添加到动态生成的表格单元格中
- 使用 Javascript 动态查找和编辑表格单元格
- 如何通过每行中动态添加的按钮更改 HTML 表格单元格值
- 如果表格是动态生成的,如何在单击时更改 html 单元格的颜色
- 动态单元格宽度
- 谷歌表格/Javascript:如何“获取单元格”动态值
- 尝试将行和单元格动态添加到表中