3

以下のようなテーブルがいくつかあります。

<table id="table1">
<tr>
    <th>Item</th>
    <th>Price</th>
</tr>
<tr>
    <td>Item 1</a></td>
    <td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
    <td>Item 2</a></td>
    <td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
    <td>Item 3</td>
    <td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>Total:</td>
    <td>$total </td>
</tr>
</table>



<table id="table2">
<tr>
    <th>Item</th>
    <th>Price</th>
</tr>
<tr>
    <td>Item 1</a></td>
    <td><input type="text" name="sum1" id="sum1" /></td>
</tr>
<tr>
    <td>Item 2</a></td>
    <td><input type="text" name="sum2" id="sum2" /></td>
</tr>
<tr>
    <td>Item 3</td>
    <td><input type="text" name="sum3" id="sum3" /></td>
</tr>
<tr>
    <td>Item 4</td>
    <td><input type="text" name="sum4" id="sum4" /></td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>Total:</td>
    <td>$total</td>
</tr>
</table>

入力ごとにアイテムの価格を合計する可能性があるかどうか (table1、table2 など)、最後にすべてのアイテムのアイテムの合計を出力する可能性があるかどうかは誰にもわかりませんか?

4

3 に答える 3

1

jQuery や単に javascript のような dom マニピュレータが必要です。フィールドをさらに簡単にするために、「合計」などのクラスを指定します。次に、親テーブルからすべての子の「合計」を取得できます。それらの値を int に解析して追加します。悪くない。

これが実際のJSフィドルの例です

于 2012-05-13T14:10:33.223 に答える
0

これは、jquery を使用すると非常に簡単なはずです。各入力に「line-item」などと呼ばれるクラス名を追加し、計算された合計を表示するセルに「total」というクラス名を追加できると仮定すると、次のことができます。

function calculateSum(tableId){
 var sum = 0;
 $(tableId + ' .line-item').each(function(){
   var value = parseFloat($(this).val().trim());
   if(value){
    sum += parseFloat($(this).val());
   }
 });
 $(tableId + ' .total').html(sum);
}

必要なテーブルのIDでこの関数を呼び出します。

クラス名を追加できない場合、これは少しもタフになりませんが、.line-item単に入れようとする代わりにinput、このシナリオでトリックを行う必要があります。.total の代わりに書くことができますtr:last-child td:nth-child(2)

更新: 文字列の連結を避けるために「parseInt」を追加

于 2012-05-13T14:13:30.923 に答える
0

より良い方法は、同様の ID を持つ異なる要素を呼び出さないことです。これは無効な方法です。しかし、そうであっても、このテーブルの入力を操作するだけで、すべてのテーブルの計算を実行できます。

アルゴリズム：

  1. すべての <table> タグに対してループを実行します。
  2. <table> タグごとに、すべての <input> が見つかります (ID に関係なく)。
  3. 現在のテーブルのすべての入力の合計を計算します。

JavaScript でこれを行うことができますが、jQuery の方が適しています。

ただし、同様の ID を持つ HTML DOM 要素を呼び出さないでください。それは間違っています！！！

于 2012-05-13T14:13:49.513 に答える