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

Question

I wrote code that creates a form displayed as a table on an HTML page. I wrote Javascript so the user can add lines or delete selected lines. Functionality of adding and removing. But I want the last column of the row to display the sum of the previous three values, and this just doesn't happen.

Here is 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 used:

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

In addition, the first line is not deleted in Firefox. This only works in facepalm in Internet Explorer.

What should I do?

Answer 1

Here's a new and improved Sum feature that should make you point 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 do this, you also need to remove the spaces that precede your input fields.

Here's a JSFiddle that includes all of this. Jsfiddle

I hope it suits you.