javascript - 如何找到在使用 Javascript 动态创建的某些字段中输入的值的总和？

Question

我编写了代码来创建一个在 HTML 页面上显示为表格的表单。我编写了 Javascript 以允许用户添加行或删除选定的行。添加和删​​除功能有效。但我希望一行的最后一列显示前三个值的总和，而这并没有发生。

这是 HTML 代码:

<input type="button" value="Add Row" onclick="addRow('dataTable')" />

<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" width="350px" border="1">
 <form name="f1" id="f1">
    <tr>
    <td><b> Select </b></td>
    <td><b> S.No. </b></td>
    <td><b> Subject </b></td>
    <td><b> Mark 1 </b></td>
    <td><b> Mark 2 </b></td>
    <td><b> Mark 3 </b></td>
    <td><b> Total </b></td>
    </tr>
    <tr>
        <td> <input type="checkbox" name="chk"/></td>
        <td> 1 </td>
        <td> <input type="text" name="subject" /> </td>
        <td> <input type="text" name="mark" /></td>
        <td> <input type="text" name="marka" /></td>
        <td> <input type="text" name="markb" /></td>
        <td> <input type="text" name="total" /></td>
    </tr>
    </form>
</table>
<input type=button value="Sum" onclick=sum('dataTable') />

还有我一直在使用的 Javascript:

 <script language="javascript">
    var k=0;
    function addRow(tableID) {
        k++;
        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chk"+k;
        cell1.appendChild(element1);

        var cell2 = row.insertCell(1);
        cell2.innerHTML = rowCount;

        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "subject"+k;
        cell3.appendChild(element2);

        var cell4 = row.insertCell(3);
        var element3 = document.createElement("input");
        element3.type = "text";
        element3.name = "mark"+k;
        cell4.appendChild(element3);

        var cell5 = row.insertCell(4);
        var element4 = document.createElement("input");
        element4.type = "text";
        element4.name = "marka"+k;
        cell5.appendChild(element4);

        var cell6 = row.insertCell(5);
        var element5 = document.createElement("input");
        element5.type = "text";
        element5.name = "markb"+k;
        cell6.appendChild(element5);

        var cell7 = row.insertCell(6);
        var element6 = document.createElement("input");
        element6.type = "text";
        element6.name = "total"+k;
        cell7.appendChild(element6);
    }

    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }

        for(var j=1; j<rowCount; j++)
        {var mytable = document.getElementById(tableID);
        mytable.rows[j].cells[1].innerHTML = j;
        }
    }
function sum(tableID)
{   var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for(var i=1;i<rowCount;i++)
    {
    table.rows[i].cells[6].name.value=table.rows[i].cells[3].name.value + table.rows[i].cells[4].name.value + table.rows[i].cells[5].name.value;
    }

}


</script>

此外，第一行在 Firefox 中不会被删除。这仅适用于 Internet Explorer facepalm。

我该怎么办？

Answer 1

这是一个新的和改进的 Sum 函数，可以让您指向正确的方向:

sum = function()
{
   var table = document.getElementById("dataTable");
   var rowCount = table.rows.length;

   for(var i=1;i<rowCount;i++)
   {
      table.rows[i].cells[6].childNodes[0].value = 
         parseInt(table.rows[i].cells[3].childNodes[0].value) + 
         parseInt(table.rows[i].cells[4].childNodes[0].value) + 
         parseInt(table.rows[i].cells[5].childNodes[0].value);
   }
}

要完成这项工作，您还需要删除输入字段前的空格。

这是一个包含所有内容的 JSFiddle。 JSFiddle

希望它能满足您的需求。