0

Price、Quantity、および Total の 3 つの入力要素の行で構成されるテーブルがあります。その下には、テーブルに別の行を動的に生成するためにクリックできる 2 つのリンクがあります。すべてうまく機能していますが、実際に合計要素の値を計算すると問題が発生します。最初の合計要素の値を計算する方法は知っていますが、テーブルに新しい行を追加するときにこの機能を拡張するのに問題があります。html は次のとおりです。

<table id="table" border="0">
    <thead>
        <th>Price</th><th>Quantity</th><th>Total</th>
    </thead>
<tbody>
<tr>
    <td><input id ="price" type = "text"></input></td>
    <td><input id ="quantity" type = "text"></input></td>
    <td><input id ="total" type = "text"></input></td>
</tr>
</tbody>
</table>
<a href="#" id="add">Add New</a>
<a href="#" id="remove">Remove</a>

私が使用しているjqueryは次のとおりです。

$(function(){
  $('a#add').click(function(){
    $('#table > tbody').append('<tr><td><input id ="price" type = "text"></input></td><td><input id ="quantity" type = "text"></input></td><td><input id ="total" type = "text"></input></td></tr>');  
   });
  $('a#remove').click(function(){
  $('#table > tbody > tr:last').remove();
  });
});

$(function(){
    $('a#calc').click(function(){
    var q = $('input#quantity').val();
    var p = $('input#price').val();
    var tot = (q*p);
    $('input#total').val(tot);
    });
 });

私はjqueryを初めて使用するので、計算したい関連フィールドを選択する簡単な方法がわからない可能性があります。ガイダンスをいただければ幸いです。

4

2 に答える 2

3

同じ ID を共有する複数の要素を持つことはできません。ID は、ドキュメント全体で一意である必要があります。

つまり、クラスを使用するようにコードを変更する必要があります。

<table id="table" border="0">
    <thead>
        <th>Price</th><th>Quantity</th><th>Total</th>
    </thead>
<tbody>
<tr>
    <td><input class="price" type = "text"></input></td>
    <td><input class="quantity" type = "text"></input></td>
    <td><input class="total" type = "text"></input></td>
</tr>
</tbody>
</table>
<a href="#" id="add">Add New</a>
<a href="#" id="remove">Remove</a>

と：

$(function(){
  $('a#add').click(function(){
    $('#table > tbody').append('<tr><td><input class ="price" type = "text"></input></td><td><input class ="quantity" type = "text"></input></td><td><input class ="total" type = "text"></input></td></tr>');  
   });
  $('a#remove').click(function(){
  $('#table > tbody > tr:last').remove();
  });
});

完全なソリューションを提供するために、ID とのリンクはどこにありますかcalc。計算はどのように行われるべきですか？すべての行に独自のcalculationボタンが必要ですか、それともすべての行の値を計算する 1 つのグローバル ボタンがありますか?

後者の場合、次のようなものを使用できます。

$('a#calc').click(function(){
    $('#table tr').each(function() {
        $(this).find('.total').val(
            parseFloat($(this).find('.quantity').val())*
            parseFloat($(this).find('.price').val())
        );
    }
}

説明：

リンクをクリックすると、関数はテーブル内のすべての行をループし、クラスを使用して入力フィールドを検索し、結果をその行のクラスをquantity使用priceして入力に入れます。total

parseFloat計算には必ず数値を使用するように注意してください。

$(function(){})また、作成するすべての JS コードを使用する必要はないことに注意してください。DOMがロードされた後に実行する必要があるすべてのもの (コードから要素にアクセスするため) をこの関数に入れます。したがって、次のことを行う必要があります。

$(function() {
    $('a#add').click(function(){
         // .....
    }:

    $('a#calc').click(function(){
        // ...
    };
}

更新:この方法を使用する場合.blur()の例を次に示します。

$('#table').delegate('input.total' , 'blur', function(){
    var row = $(this).closest('tr');
    $(this).val(
            $('.quantity', row).val())*
            $('.price', row).val())
    );
});

.closest() セレクター (この場合は行) に一致する最も近い親を取得し、残りは最初に記述した関数 (特定の行の値を取得する) と同様です。

ここでは新しい方法を使用しdelegate()ますが、 を使用することもできます.live()。行を動的に作成しているため、それらのいずれかを使用する必要があることに注意してください。たとえば、$(input.total).blur(function(){})実行時 (DOM のロード時) には行はまだ作成されていません。

于 2010-04-05T21:34:58.577 に答える
1

これらの新しいテーブル行に重複する 'id' 値を作成しています。id は、1 つのページ内で一意であると想定されています (複数のページで使用できますが、ページごとに 1 回のみ使用できます)。

は$('input#quantity')、複数回発生することは想定されていないため、見つかった id の最初の (または最後の) インスタンスのみを返します。

回避策は、すべての ID を に変更してから、次のname=ようにすることです (疑似コード:

var rows = $('table').getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
    var q = ... extract quantity field from this row;
    var p = ... extract price field from this row;
    ... do calculation as usual
    ... store result in the total field in this row
}
于 2010-04-05T21:28:30.027 に答える