0

SO コミュニティでは、一意の名前を持つ行をテーブルに追加するスクリプトを入手しました。各行に 2 つの入力を取り、それらを掛け合わせて、結果を 3 番目の入力に表示したいと考えています。

フィドルはhttp://jsfiddle.net/yUfhL/231/にあります

私のコードは: HTML

<table class="order-list">
  <tr><td>Product</td><td>Price</td><td>Qty</td><td>Total</td></tr>
  <tr>
      <td><input type="text" name="product" /></td>
      <td><input type="text" name="price" /></td>
      <td><input type="text" name="qty" /></td>
      <td><input type="text" name="linetotal" /></td>
    </tr>
</table>
<div id="grandtotal">
    Grand Total Here
</div>

JS

var counter = 1;
jQuery("table.order-list").on('change','input[name^="product"]',function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" name="product' +
        counter + '"/></td><td><input type="text" name="price' +
        counter + '"/></td><td><input type="text" name="qty' +
        counter + '"/></td><td><input type="text" name="total' +
        counter + '"/></td><td><a class="deleteRow"> x </a></td></tr>');
    jQuery('table.order-list').append(newRow);
});

jQuery("table.order-list").on('click','.deleteRow',function(event){

    $(this).closest('tr').remove();
});

$('table.order-list tr').each(function() {
   var price = parseInt( $('input[id^=price]', this).val(), 10 );
   var qty   = parseInt( $('input[id^=qty]'  , this).val(), 10 );
   $('input[id^=linetotal]', this).val(price * qty);
});

そのため、現在、2つのセル、数量と価格の積を取得するjsを起動できません。結果をlinetotalに表示したい。

この最後の部分は、div の総計としてすべての linetotals の合計を表示することです。grandtotal

いつものように感謝します。

4

2 に答える 2

3

要素に name 属性を与えるだけですが、id セレクター ([id^=price]) を使用します。「id で始まる」セレクターを使用するよりも、特定のクラスを指定する方がはるかに簡単です。また、行の合計をいつ計算しますか? また、いつ総計を計算しますか? どのイベントで？

これがどのように見えるべきかについての私の解釈です：

<table class="order-list">
    <thead>
        <tr><td>Product</td><td>Price</td><td>Qty</td><td>Total</td></tr>
    </thead>

    <tbody>
        <tr>
            <td><input type="text" name="product" /></td>
            <td>$<input type="text" name="price" /></td>
            <td><input type="text" name="qty" /></td>
            <td>$<input type="text" name="linetotal" readonly="readonly" /></td>
            <td><a class="deleteRow"> x </a></td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td colspan="5" style="text-align: center;">
                <input type="button" id="addrow" value="Add Product" />
            </td>
        </tr>

        <tr>
            <td colspan="5">
                Grand Total: $<span id="grandtotal"></span>
            </td>
        </tr>
    </tfoot>
</table>

そしてJS：

$(document).ready(function () {
    var counter = 1;

    $("#addrow").on("click", function () {
        counter++;

        var newRow = $("<tr>");
        var cols = "";
        cols += '<td><input type="text" name="product' + counter + '"/></td>';
        cols += '<td>$<input type="text" name="price' + counter + '"/></td>';
        cols += '<td><input type="text" name="qty' + counter + '"/></td>';
        cols += '<td>$<input type="text" name="linetotal' + counter + '" readonly="readonly"/></td>';
        cols += '<td><a class="deleteRow"> x </a></td>';
        newRow.append(cols);

        $("table.order-list").append(newRow);
    });

    $("table.order-list").on("change", 'input[name^="price"], input[name^="qty"]', function (event) {
        calculateRow($(this).closest("tr"));
        calculateGrandTotal();
    });

    $("table.order-list").on("click", "a.deleteRow", function (event) {
        $(this).closest("tr").remove();
        calculateGrandTotal();
    });
});

function calculateRow(row) {
    var price = +row.find('input[name^="price"]').val();
    var qty = +row.find('input[name^="qty"]').val();
    row.find('input[name^="linetotal"]').val((price * qty).toFixed(2));
}

function calculateGrandTotal() {
    var grandTotal = 0;
    $("table.order-list").find('input[name^="linetotal"]').each(function () {
        grandTotal += +$(this).val();
    });
    $("#grandtotal").text(grandTotal.toFixed(2));
}

http://jsfiddle.net/QAa35/

あなたの JS ではlinetotal、1 つの動的入力のname. 私が行った他のいくつかのマイナーな変更がありました。を使用することもできますが<thead>、これらのセクションは. また、「製品」の入力が変更されたときに新しい行が自動的に追加されるのは良い設計ではないと思います。これは頻繁に発生する可能性があり、彼らの意図は新製品を追加することではない可能性があります.ボタンははるかに使いやすい. たとえば、最初の「product」入力に「asdf」と入力してから、どこかをクリックするとします。新しい行が追加されます。タイプミスをしたとしたら、戻って「asd」に変更し、どこかをクリックします。別の新しい行が追加されます。それは正しくないようです。<tbody><tfoot><table>

于 2013-03-27T20:54:43.680 に答える
1

この関数はトリックを行う必要があります:

function updateGrandTotal() {

    var prices = [];
    $('input[name^="price"]').each(function () {
        prices.push($(this).val());
    });

    var qnts = [];
    $('input[name^="qty"]').each(function () {
        qnts.push($(this).val());
    });

    var total = 0;
    for(var i = 0; i < prices.length; i++){
        total += prices[i] * qnts[i];
    }

    $('#grandtotal').text(total.toFixed(2));

}

入力が変更されるたびに総計を更新するには、テーブル変更イベントにバインドする必要があります。

$("table.order-list").change(updateGrandTotal);

これが実用的なフィドルです。

于 2013-03-27T21:12:42.980 に答える