使用jquery获取每行总数和总表数 [英] Using jquery to get per row totals and grand total of table

问题描述

所以这个简短的版本是：我可以遍历 each（）之前的选择器的匹配元素中的元素吗？或者是否有一种更简单的方式来获得我想要的而不是 each（）循环？

---

我认为这会容易得多，这让我觉得我只是缺少一些使用jquery进行元素遍历的基本原理。

场景：

我有一个表（在这种情况下它是合适的），其中每个单元格都有一个文本 input 。最后一个输入是只读的，应该是该行输入的其他值的总和。我有一个非常麻烦的js脚本，用于查找每行的总数，然后查找每行总数。总共

以下是基本的HTML：

 < table> 
< thead> 
将TR><的第i;西1·/第><的第i;西2'; /第><的第i;西3'; /第><的第i;总计< /第>< / 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 =textreadonly =readonly/> < / TD>< / TR> 
< tr id =row2>< td>< input type =text/>< / td>< td>< input type =text/><<< ; / TD>< TD><输入类型= 文本/>< / TD>< TD类= 总 ><输入类型= 文本 只读= 只读/> < / TD>< / TR> 
< tr id =row3>< td>< input type =text/>< / td>< td>< input type =text/><<< ; / TD>< TD><输入类型= 文本/>< / TD>< TD类= 总 ><输入类型= 文本 只读= 只读/> < / TD>< / TR> 
< / tbody> 
< / table> 
  

javascript会验证输入的数据是否为数字，只是要清楚。

因此，对于 onchange 的每个输入，我都有一个事件侦听器，用于更新用户输入数据并移至下一个单元格/输入。然后我有一个名为 updateTotal 的函数，它为循环循环遍历每一行并在该循环中，每个单元格使用 ，最后将总单元格中的输入设置为总和。



快速提示：我已经包含了下面的代码，以表明我不只是在寻找一个手，并且展示了我所想到的基本逻辑。请随意浏览或跳过此部分。它的工作原理并不需要任何调试或批评。

这就是：

  function updateTotal（）{
 table = document.getElementsByTagName（tbody）[0]; 
 allrows = table.getElementsByTagName（tr）; 
 grandtotal = document.getElementById（grand）; 
 grandtotal.value =; 
 
 for（i = 0; i  row_cells = allrows [i] .getElementsByTagName（input）; 
 row_total = allrows [i] .getElementsByTagName（input）[allrows.length  -  2]; 
 row_total.value =; （ii = 0; ii  row_total.value = Number（row_total.value）+ Number（row_cells [i] [ii]）的
 
。 。值）; 
 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）; 
}）; 
 
 $ b  

但是使用 $（this） 似乎不像我想的那样工作。我阅读后发现，在每个循环中使用 $（this）指向每个匹配的元素，这是我的预期，但我不明白我可以遍历each（）函数中的那个元素。上面也遗漏了grand_total位，因为我得到的总变量运行得更少。我尝试了以下方法来获得row_totals：

  $（$（this）.attr（id）+td ：not（.total）input：text）。each（function（）{
  

取得了一些成功，但是当我尝试添加时，我设法打破它，我不认为我需要每一行都有一个id来完成这个工作，因为每个部分都应该指向我想要的那一行。 / p>

---

因此，这个简短版本是：我可以使用每个循环遍历匹配中的元素，if所以，什么是正确的语法？或者是否有一种更简单的方式来获得我想要的而不是每个循环？

哦，最后一个想法......

>

是否有可能通过jquery得到所有匹配元素的数字总和（而不是一个长字符串）？我会更多地研究自己，但是如果有人知道，它会使这一切变得更容易。

解决方案

您试图设置您的上下文直接试试这个：

pre $ 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）;
}）;


$ / code>

有关上下文的更多信息，请查看jquery文档： http://docs.jquery.com/Core/jQuery#expressioncontext

So the short version of this is: Can I traverse only the elements within the matched element of the selectors before the each()? Or is there a simpler way of getting what I want without an each() loop?

---

I thought this would be much easier, which makes me think I'm just missing some fundamental principle of element traversing with jquery.

So here's the scenario:

I have a table (and it is appropriate in this case), where each cell has a text input. The last input is read-only and is supposed to be the total sum of the other values entered on that row. I have a really messy js script for finding both the totals of each row and then the grand total of each row total.

Here's the basic 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>

The javascript will validate that the data entered is numerical, just to be clear.

So I have a event listener for each input for onchange that updates the total when the user enters data and moves to the next cell/input. Then I have a function called updateTotal that currently uses for loops to loop through each row and within that loop, each cell, and finally sets the input in the total cell to sum.

Quick note: I have included the code below to show that I'm not just looking for a hand out and to demonstrate the basic logic of what I have in mind. Please feel free to skim or skip this part. It works and doesn't need any debugging or critique.

This is what that looks like:

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);
        }
    }
}

Now I am trying to re-write the above with jquery syntax, but I'm getting stuck. I thought the best way to go would be to use each() loops along the lines of:

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);
});

}

But using $(this) doesn't seem to work in the way I thought. I read up and saw that the use of $(this) in an each loop points to each matched element, which is what I expected, but I don't get how I can traverse through that element in the each() function. The above also leaves out the grand_total bit, because I was having even less luck with getting the grand total variable to work. I tried the following just to get the row_totals:

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

with some success, but then managed to break it when I tried adding on to it. I wouldn't think I'd need each row to have an id to make this work, since the each part should point to the row I have in mind.

---

So the short version of this is: Can I use the each loop to traverse only the elements within the matches, and if so, what is the correct syntax? Or is there a simpler way of getting what I want without an each loop?

Oh, one last thought...

Is it possible to get the numerical sum (as opposed to one long string) of all matched elements with jquery? I'll research this more myself, but if anyone knows, it would make some of this much easier.

解决方案

You are trying to set your context incorrectly try this:

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);
    });

}

For more information about the context check out the jquery docs: http://docs.jquery.com/Core/jQuery#expressioncontext

这篇关于使用jquery获取每行总数和总表数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！