How do I find the sum of the values entered in certain fields that were created dynamically using Javascript?

Question

I've written code that creates a form displayed as a table on a HTML page. I've written Javascript to allow the user to add rows or delete selected rows. The add and delete functionalities work. But I want the final column of a row to display the sum of the previous three values, and that is just not happening.

Here's the HTML code:

<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') />

And the Javascript that I've been using:

 <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>

Also, the first row doesn't get deleted in Firefox. That works only in Internet Explorer facepalm.

What should I do?

Answer 1

Here's a new and improved Sum function that should get you pointed in the right direction:

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

To make this work you'll also need to remove the spaces preceding your input fields.

Here's a JSFiddle that incorporates all of it. JSFiddle

Hope it suits your needs.