使用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（）获取文本框等的值。}）; //现在在此函数之外，您将总计//将其添加到隐藏字段或全局变量以获取行总数等。}）;