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 を追加する必要があります。セルをループしていますが、その理由はありません。また、テーブルが変更されたときにすべての行をループする必要はありません。変化したものを計算するだけです！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);    
    }

}());

上記のコードの実行フィドル </ p >

于 2012-09-25T07:02:29.757 に答える
0

エラーはスペルミスが原因だと思います。「cells[3].childnodes [0] .value = num3.toString（）;」にchildNodesではなくchildnodesがあります。

このフィドルを確認してください-http://jsfiddle.net/VwU7C/

于 2012-09-25T06:43:29.713 に答える