Jak znaleźć sumę wartości wprowadzonych w niektórych polach, które zostały utworzone dynamicznie przy użyciu Javascript?

Question

Napisałem kod, który tworzy formularz wyświetlany jako tabela na stronie HTML. Napisałem Javascript, aby umożliwić użytkownikowi dodawanie wierszy lub usuwanie wybranych wierszy. Działają funkcje dodawania i usuwania. Ale chcę, aby ostatnia kolumna wiersza wyświetlała sumę poprzednich trzech wartości, a to się po prostu nie dzieje.

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

A JavaScript że używam:

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

Również pierwszy wiersz nie zostaną usunięte w Firefoksie. To działa tylko w przeglądarce Internet Explorer facepalm.

Co należy zrobić?

Answer 1

Oto nowa i ulepszona funkcja Sum, które powinny Ci wskazał w dobrym kierunku:

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

Aby uczynić tę pracę Trzeba także usunąć spacje poprzedzające swoich pól wejściowych.

Oto JSFiddle, który zawiera wszystko. JSFiddle

Mam nadzieję, że pasuje do Twoich potrzeb.