0

我有一张如下表。我必须使用“购买数量”和“市场价格”字段填充“金额”字段。金额=购买数量*市场价格。我正在做某事——

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

我应该改变什么？

我的表

下面的 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>
4

3 回答 3

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();
于 2012-09-25T06:33:35.903 回答
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，而不是硬编码。您正在遍历单元格，没有理由这样做。当表格改变时，也不需要循环每一行。只计算改变的那个！由于浏览器中的空白差异，使用 childNode 可能会很棘手。呈现表格后运行此代码。

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

}());

上面代码的运行fiddle ​</p>

于 2012-09-25T07:02:29.757 回答
0

我认为该错误是由于拼写错误造成的——“cells[3].childnodes[0].value = num3.toString();”上有子节点而不是子节点

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

于 2012-09-25T06:43:29.713 回答