Come trovo la somma dei valori immessi in determinati campi che sono stati creati dinamicamente usando Javascript?

Question

Ho scritto codice che crea un modulo visualizzato come tabella su una pagina HTML. Ho scritto Javascript per consentire all'utente di aggiungere righe o cancellare righe selezionate. Funzionano le funzionalità di aggiunta ed eliminazione. Ma voglio la colonna finale di una riga per visualizzare la somma dei precedenti tre valori, e questo non sta succedendo.

Ecco il codice 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') /> 

E il Javascript che ho usato:

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

Inoltre, la prima riga non vengono eliminati in Firefox. Funziona solo in Internet Explorer facepalm.

Cosa devo fare?

Answer 1

Ecco una nuova e migliorata funzione Somma che dovrebbe farti puntato nella giusta direzione:

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

Per fare questo lavoro avrete anche bisogno di togliere gli spazi che precedono i vostri campi di input.

Ecco un JSFiddle che incorpora tutto. JSFiddle

Spero che sia adatto alle tue esigenze.