使用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