-1

私は自分のニーズに合わせて変更した JavaScript を使用してテーブルに行を動的に作成しました。この動的に作成されたテーブル内で、Qty に価格を掛けて、それを合計ボックスに入れたい

html

<table>       
    <tbody id="plateVolumes">
        <tr>
            <td><input type="checkbox" value="None" id="chk" name="chk[]" /></div></td>
            <td><input type='text' name='qty' id='qty' class="qty" placeholder='Qty' /></td>
            <td><select name="productdescription[]" class="productdescription" id="productdescription">
                <option value="Product">Product</option>
                <option value="Product01" label="Product01">Product01</option>
                <option value="Product02" label="Product02">Product02</option>
                <option value="Product03" label="Product03">Product03</option>
                <option value="Product04" label="Product04">Product04</option>
                <option value="Product05" label="Product05">Product05</option>
                <option value="Product06" label="Product06">Product06</option>
                </select></td>
            <td><input type='text' name='price[]' id='price' class="price" placeholder='Price (&pound;)' onChange="WO()" /></td>
            <td><input type='text' name='totalprice[]' id='totalprice' class="price" placeholder='Total Price&nbsp;(&pound;)' /></td>
        </tr>
    </tbody>
</table>

値を一緒に追加するためにこの JavaScript コードを使用していますが、これはコードによって作成されていない最初の行でのみ機能します。

JavaScript

<script>
function WO() {

var qty = document.getElementById('qty').value;

var price = document.getElementById('price').value;

answer = (Number(qty) * Number(price)).toFixed(2);  

document.getElementById('totalprice').value = answer;   
}
</script>

私はjavascriptにかなり慣れていないので、これを動的行にも適用する方法があるかどうか疑問に思っていますが、phpメーラーに渡すときのためにそれらを別々に保ちます。

編集:私はコードで遊んでいて、必要な答えを得るのに少し近づいていますが、これをどのようにして私が望む答えを与えるのかまだわかりません.

function WO() {
for (var i = 0; i < rowCount; i++) {

var qty = document.getElementsByClassName('qty').value;

var price = document.getElementsByClassName('price').value;

var answer = (Number(qty) * Number(price)).toFixed(2);

document.getElementsByClassName('totalprice[' + i + ']').innerHTML = answer;
}
}
4

2 に答える 2

1

これは役に立ちました。これを作成した友人に尋ねたところ、他の誰かが疑問に思った場合に備えて追加すると思いました 

function WO() {
var tbody = document.getElementById("plateVolumes");

for(var i = 0; i < tbody.rows.length; i++) {
    var row = tbody.rows[i];
    var qty = row.cells[1].childNodes[0].value;
    var price = row.cells[3].childNodes[0].value;
    var answer = (Number(qty) * Number(price)).toFixed(2);
    row.cells[4].childNodes[0].value = answer;
    }
}
于 2014-03-11T09:12:05.003 に答える
0

HTML id では一意である必要があります。ID で要素を取得すると、取得した最初の要素が常に返されます。

代わりにクラスを使用することをお勧めします。行のループを実行し、合計を計算します。

これはより近い解決策になります...私はまだテストしていません。

    var trNodes = document.getElementById('plateVolumes').childNodes;
    for(var i=0; i < trNodes.length; i++) {

        var qty = trNodes[i].getElementsByClassName('qty').value;

        var price = trNodes[i].getElementsByClassName('price').value;

        var answer = (Number(qty) * Number(price)).toFixed(2);

        trNodes[i].getElementsByClassName('totalprice').innerHTML = answer;
    }

参照

于 2014-03-10T10:18:39.787 に答える