Wie finde ich die Summe der Werte in bestimmten Feldern, die dynamisch mit Javascript erstellt wurden?

Question

Ich habe Code geschrieben, der ein Formular erstellt, das als Tabelle auf einer HTML-Seite angezeigt wird. Ich habe Javascript geschrieben, damit der Benutzer Zeilen hinzufügen oder ausgewählte Zeilen löschen kann. Die Funktionen zum Hinzufügen und Löschen funktionieren. Aber ich möchte die letzte Spalte einer Zeile die Summe der vorherigen drei Werte anzeigen, und das ist gerade nicht passiert.

Hier ist der 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') /> 

Und das Javascript, das ich habe mit:

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

Auch dann, wenn die erste Zeile nicht in Firefox gelöscht. Das funktioniert nur in Internet Explorer facepalm.

Was soll ich tun?

Answer 1

Hier ist eine neue und verbesserte Funktion Summe, die Sie in der richtigen Richtung bekommen soll:

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

Um diese Arbeit machen Sie auch die Räume vor Ihrem Eingabefeld entfernen müssen.

Hier ist eine JSFiddle, die alles enthält. JSFiddle

Hoffe, dass es Ihren Bedürfnissen entspricht.