動態單元格中的所有內容 - javascript

我有JavaScript代碼生成html表格並填充它從文本區域中取得的信息。每次點擊新產品的按鈕時，我都想顯示特定單元格的總數（新值 - 將在總數中添加的價格）。簡而言之，所有產品的總和將被顯示。刪除特定單元格時也是如此，它需要從總體中刪除。動態單元格中的所有內容 - javascript

現在，直到我進入不同的號碼能正常工作...

另見this fiddle

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
     function addRow(formID, tableID) {    
      var table = document.getElementById(tableID); 
      var form = document.forms[formID]; 
      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount);     
      var cell1 = row.insertCell(0); 
      var element1 = document.createElement("input"); 
      element1.type = "checkbox"; 
      cell1.appendChild(element1); 
      var cell2 = row.insertCell(1); 
      cell2.innerHTML = rowCount + 1; 
      var cell3 = row.insertCell(2); 
      cell3.innerHTML = form.elements['product'].value; 
      var cell4 = row.insertCell(3); 
      cell4.name = "pricee"; 
      cell4.id = "pricee";     
      cell4.innerHTML = form.elements['price'].value;    
      // ******************** Important part ****************************** 
      var tot=0; 
      for(var i=0;i<rowCount;i++){  
       tot += parseInt(cell4.innerHTML,10);   
      } 
      document.getElementById("total").innerHTML=tot; 
      // ******************** Important part ****************************** 
     } 
     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); 
      } 
     } 
    </script> 
</head> 
<body><form id="fid"> 
Total:  <span name="total" id="total"></span><br/>      
Product:  <br/><input type="text" id="product"/><br/> 
Price: <br/><input type="text" id="price"/><br/> 
<INPUT type="button" value="add" id="add" onclick="addRow('fid','dataTable')" /> 
<INPUT type="button" value="delete" id="delete" onclick="deleteRow('dataTable')" /> 
<TABLE id="dataTable" width="auto" border="1"> 
    <TR> 
    <TD></TD> 
    <TD>id</TD> 
<TD>product</TD> 
    <TD>price</TD> 
    </TR> 
</TABLE> 
</form> 
</body> 
</html>

來源

2014-01-09 John M.

var tot=0; 
for(var i=0;i<rowCount;i++){  
    tot += parseInt(cell4.innerHTML,10);   
}

在上面的代碼，你沒有迭代行，但只提到最後一欄。

因此，在每次迭代中，最後一列的值將被添加。

而是嘗試下面的代碼

var tot=0; 
for(var i=1;i<=rowCount;i++){ 
    tot += parseInt(table.rows[i].cells[3].innerHTML,10);  
}

在這裏，我已經使用i = 1因爲0代表前往tr和得到的價格一列，我在使用

|---------------------3rd column table.rows[i].cells[3].innerHTML |__row index

類似刪除方法，你必須以相反的方式完成相同的操作，如

var tot = +document.getElementById("total").innerHTML; // get total 
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) { 
     tot -= parseInt(table.rows[i].cells[3].innerHTML, 10) //only for checked row 
     table.deleteRow(i); 
     rowCount--; 
     i--; 
    } 
} 
document.getElementById("total").innerHTML = tot; // update the total 
}

入住這fiddle

來源

2014-01-09 09:01:21 Praveen

謝謝，它的工作，我現在明白好多了。 –

@BombaRuLz我很高興我能夠幫助你:) – Praveen