如何找到在使用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 = 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

希望它適合您的需求。