如何通過JavaScript代碼填充表格單元格？

Question

我有一個表如下。我必須使用「購買數量」和「市場價格」字段來填充「金額」字段。金額=購買數量*市場價格。我做的事 -

<script> 
function populate() { 
var rows = document.getElementById("mytable").getElementsByTagName("tr"); 
for (var i = 1; i <= rows.length; i++) { 
    cells = rows[i].getElementsByTagName("td"); 
    for (var j = 0; j <= cells.length; j++) { 
     if (j == 1) { 
      var num1 =parseFloat(cells[1].childNodes[0].value); 
      var num2 =parseFloat(cells[2].childNodes[0].data); 
      var num3=num1 * num2; 
      cells[3].childNodes[0].value = num3.toString(); 
     } 
    } 
    } 
} 
</script> 

我可以列1列2和的值，但沒有得到填充在最後一列中的值。最後一行似乎不起作用。

cells[3].childNodes[0].value = num3.toString(); 

我應該改變什麼？

的HTML代碼如下是我的.jsp文件的一部分。

<form action="BuyServlet"> 
    <table border="1" cellpadding="5" id="mytable"> 
     <tr> 
      <th>Stock Name</th> 
      <th>Buy Quantity</th> 
      <th>Market Price</th> 
      <th>Amount</th> 
     </tr> 
     <tr> 
      <td>Stock Name</td> 
      <td><input type="text" name="quantity" onblur="populate()"></td> 
      <td>122</td> 
      <td><input type="text" name="amount"> 
      </d> 
     </tr> 
     <tr> 
      <td>Stock Name</td> 
      <td><input type="text" name="quantity" onblur="populate()"></td> 
      <td>111</td> 
      <td><input type="text" name="amount"></td> 
     </tr> 
    </table> 
</form> 

Answer 1

你的代碼是需要改進的。在你的桌子上，你應該有一個thead和一個tbody部分。這將使其更容易訪問並更容易地加入標題行。

<table border="1" cellpadding="5" id="mytable"> 
     <thead> 
      <tr> 
      <th>Stock Name</th> 
      <th>Buy Quantity</th> 
      <th>Market Price</th> 
      <th>Amount</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td>Stock Name</td> 
      <td><input type="text" name="quantity"></td> 
      <td>122</td> 
      <td><input type="text" name="amount"></td> 
      </tr> 
      <tr> 
      <td>Stock Name</td> 
      <td><input type="text" name="quantity"></td> 
      <td>111</td> 
      <td><input type="text" name="amount"></td> 
      </tr> 
     </tbody> 
    </table> 
</form> 

現在隨着代碼，你應該添加代碼，而不是硬編碼的onblur。你在循環單元格，沒有理由。當表格改變時，也不需要循環每一行。只需計算一個變化的！由於瀏覽器中的空白區別，使用childNodes可能會很棘手。表格渲染後運行此代碼。

(function() { 

    var table = document.getElementById("mytable"); 
    var tbody = table.getElementsByTagName("tbody")[0]; 
    var rows = tbody.getElementsByTagName("tr");​​​​​​​​​ 

    function populateRow (index, addBlurEvent) { 
     var row = rows[index]; 
     var cells = row.getElementsByTagName("td") 
     var textboxes = row.getElementsByTagName("input"); 

     var amountTextbox = textboxes[0]; 
     var totalTextbox = textboxes[1]; 
     var costCell = cells[2]; 

     var amount = amountTextbox.value.length>0 ? parseFloat(amountTextbox.value) : 0; 
     var cost = parseFloat(costCell.innerHTML); 
     var total = amount * cost; 
     totalTextbox.value = total; 

     if (addBlurEvent) { 
      amountTextbox.onblur = function() { populateRow(index, false); }; 
     } 

    } 

    for (i=0;i<rows.length;i++) { 
     populateRow(i, true);  
    } 

}());  

上面的代碼

Answer 2

基本上你都可以從文本框（最佳量）的價值和你正在使用的數據，以獲得市場價格的價值（更好地利用的innerText）

試試這個（請以你的代碼內部環）

var num1 =parseFloat(cells[1].childNodes[0].value); 
var num2 =parseFloat(cells[2].innerText); 
var num3=num1 * num2; 
cells[3].innerText = num3.toString(); 

Answer 3

我認爲錯誤是由於拼寫錯誤 - 你的childNodes代替的childNodes上的 「細胞[3] .childnodes [0]。價值= num3.toString（）;」

檢查這個小提琴 -