jqueryを使用して行の総計とテーブルの総計を取得する

Question

この短いバージョンは次のとおりです。each()の前にセレクタの一致する要素内の要素だけをトラバースできますか？または、each()ループなしで私が望むものを得るための簡単な方法はありますか？

---

これはずっと簡単だと思ったので、jqueryで要素をトラバースする基本的な原理が欠落していると思いました。

私はテーブルを持っている（と、それはこの場合には適切である）、各セルはテキストinputがあります

だから、ここでのシナリオです。最後の入力は読み取り専用で、その行に入力された他の値の総和とみなされます。私は、各行の総計と各行合計の総和の両方を見つけるための本当に面倒なjsスクリプトを持っています。

ここでは基本的なHTMLです：

<table> 
<thead> 
<tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Total</th></tr> 
</thead> 
<tbody> 
<tr id="row1"><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="total"><input type="text" readonly="readonly" /></td></tr> 
<tr id="row2"><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="total"><input type="text" readonly="readonly" /></td></tr> 
<tr id="row3"><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="total"><input type="text" readonly="readonly" /></td></tr> 
</tbody> 
</table> 

JavaScriptがちょうど明確にすることが、入力されたデータが数値であることを検証します。

onchangeの各入力用のイベントリスナーがあり、ユーザーがデータを入力して次のセル/入力に移動したときに合計を更新します。次に、updateTotalという関数があり、現在はforのループを使用して各行をループし、そのループ内で各セルを処理し、最後に総セルの入力を合計に設定します。

クイックメモ：以下のコードを使用して、私が手を出すだけでなく、自分の考えていることの基本的なロジックを示すことができることを示しました。この部分をスキミングまたはスキップしてください。それは動作し、デバッグや批判を必要としません。

これは、それがどのように見えるされています

function updateTotal() { 
    table = document.getElementsByTagName("tbody")[0]; 
    allrows = table.getElementsByTagName("tr"); 
    grandtotal = document.getElementById("grand"); 
    grandtotal.value = ""; 

    for (i = 0; i < allrows.length; i++) { 
     row_cells = allrows[i].getElementsByTagName("input"); 
     row_total = allrows[i].getElementsByTagName("input")[allrows.length - 2]; 
     row_total.value = ""; 

     for (ii = 0; ii < row_cells.length - 1; ii++) { 
      row_total.value = Number(row_total.value) + Number(row_cells[i][ii].value); 
      grandtotal.value = Number(grandtotal.value) + Number(row_cells[i][ii].value); 
     } 
    } 
} 

今、私はjQueryの構文で再書き込み以上にしようとしていますが、私は立ち往生しています。私が思ったように動作するようには思えない

function findTotals() { 
$("tbody tr").each(function() { 
    row_total = 0; 
    $($(this) + " td:not(.total) input:text").each(function() { 
     row_total += Number($(this).val()); 
     }); 
    $($(this) + " .total :input:text").val(row_total); 
}); 

} 

しかし$(this)を使用して：私は行くための最善の方法は、の線に沿ってeach()ループを使用するのだろうと思いました。私は読んで、各ループ内の$(this)の使用が、それぞれの一致した要素を指していることを見ました。これは私が期待していたものですが、each（）関数でその要素をどのようにトラバースできますか。上記のことは、grand_totalビットを除外しています。なぜなら、私は総和変数を動作させることで、より少ない運が必要だったからです。私はちょうどrow_totals取得するには、次の試してみました。ある程度の成功を収めて

$($(this).attr("id") + " td:not(.total) input:text").each(function() { 

を、私はそれまでに追加しようとしたとき、それを破ることに成功しました。私は、各部分が私が気づいている行を指している必要があるので、私はこの仕事をするためにIDを持つために各行が必要であるとは思わないでしょう。

---

だからこれの短いバージョンがある：私は試合中の要素だけを通過する各ループを使用し、そうであれば、正しい構文は何ができますか？または、各ループなしで私が望むものを得るためのより簡単な方法がありますか？

ああ、最後に考えたこと...

jqueryで一致するすべての要素の数値の合計（1つの長い文字列とは対照的に）を取得できますか？私はもっ​​と自分でこれを研究しますが、誰かが知っていれば、これをもっと簡単にするでしょう。

Answer 1

あなたはこれを試して誤ってコンテキストを設定しようとしている。

function findTotals() { 
    $("tbody tr").each(function() { 
     row_total = 0; 
     $("td:not(.total) input:text",this).each(function() { 
      row_total += Number($(this).val()); 
     }); 
     $(".total :input:text",this).val(row_total); 
    }); 

} 

のコンテキストの詳細についてはjqueryのドキュメントをチェックアウト：http://docs.jquery.com/Core/jQuery#expressioncontextは

Answer 2

セレクタのための2つのパラメータが存在する場合があります。 2番目のパラメータは、検索が行われるコンテキストhtatです。次のようなものを試してみてください。 $（ '＃tableID tbody tr）.each（function（）{ //これはテーブル行です。その行のすべてのテキストボックスを検索します。おそらくsumと呼ばれるcssクラスやその他の属性によって検索されます。 $（ 'input [type = text]'、this）.each（function（）{ //行内のすべてのテキストボックスを選択します。$（this））.val（）はテキストボックスの値などを取得します。 }）; //この関数の外には、合計があります。 //行合計などを取得するために非表示フィールドまたはグローバル変数に追加します。 。 }）;