Question

我有一张桌子如下。我必须填写＆＃34;金额＆＃34;字段使用＆＃34;购买数量＆＃34;和＃34;市场价格＆＃34;领域。金额=购买数量*市场价格。我正在做一些事情 -

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

我可以获取column1和column2的值，但是不会填充最后一列中的值。最后一行似乎不起作用。

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

我应该改变什么？

myTable

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

基本上您从文本框中获取值（最佳数量）并且您使用数据来获取市场价格的值（更好地使用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 2

您的代码需要改进。在你的表中，你应该有一个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);    
    }

}());

上述代码的running fiddle

Answer 3

我认为错误是由于拼写错误 - 你在“cells [3] .childnodes [0] .value = num3.toString（）;”

上有childnodes而不是childNodes

检查这个小提琴 - http://jsfiddle.net/VwU7C/

如何通过JavaScript代码填充表格的单元格？

3 个答案: