使用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循環遍歷每一行並在該循環內，每個單元格，最后將總單元格中的輸入設置為sum。

快速說明：我已經包含了下面的代碼，以表明我不僅僅是在尋找幫助並展示我的想法的基本邏輯。 請隨意瀏覽或跳過此部分。 它工作，不需要任何調試或批評。

這是看起來像：

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語法重寫上面的內容，但是我已經卡住了。 我認為最好的方法是使用each()循環：

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)似乎並不像我想象的那樣有用。 我讀到並看到在每個循環中使用$(this)指向每個匹配的元素，這是我所期望的，但我不知道如何在each（）函數中遍歷該元素。 上面也省略了grand_total位，因為我得到的總變量工作的運氣更少。 我嘗試了以下方法來獲取row_totals：

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

取得了一些成功，但在我嘗試添加它時設法打破了它。 我不認為我需要每一行都有一個id來使這個工作，因為每個部分應該指向我想到的行。

---

所以這個的簡短版本是：我可以使用每個循環僅遍歷匹配中的元素，如果是，那么正確的語法是什么？ 或者有沒有更簡單的方法來獲得我想要的東西而沒有每個循環？

哦，最后一個念頭......

是否有可能使用jquery獲得所有匹配元素的數值和（而不是一個長字符串）？ 我會更多地研究這個問題，但是如果有人知道的話，它會讓一些變得更容易。

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

選擇器可以有兩個參數。 第二個參數是搜索發生的上下文htat。嘗試類似下面的內容：$（'＃tableID tbody tr）.each（function（）{//現在這是一個表行，所以只需搜索該行中的所有文本框，可能使用名為sum的css類或其他屬性$（'input [text = text]'，this）.each（function（）{//選擇行中的所有textbosx。$（this ）.val（）獲取文本框等的值。}）; //現在在此函數之外，您將總計//將其添加到隱藏字段或全局變量以獲取行總數等。}）;