Question

我正在使用以下javascript代码向HTML表添加行，该表已经有2行：

<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);
}

如果我犯了一些错误，请提出任何解决方案或告诉我。

Answer 1

问题是如何为动态元素创建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

无法使用document.getElementById获取动态生成的单元格的值

1 个答案: