Question

我有以下列结构：

<div class="column">
    <span class="header">Column 1</span>
    <div class="cell">
        <input type="text" value="1" required="required" name="foo1" />
    </div>
    <div class="cell">
        <input type="text" value="1" required="required" name="foo2" />
    </div>
    <div class="cell">
        <input type="text" value="1" required="required" name="foo3" />
    </div>
    <div class="cell">
        <input type="text" value="1" required="required" name="foo4" />
    </div>
    <div class="cell">
        <input type="text" value="1" required="required" name="foo5" />
    </div>
    <div class="cell">
        <input type="text" value="1" required="required" name="foo6" />
    </div>
    <div class="cell">
        <input type="text" value="1" required="required" name="foo7" />
    </div>
    <div class="cell">
        <span class="columnTotal">7</span>
    </div>
</div>

我在表格结构中有4个这样的“列”。

我正在寻找的是某种方式，当输入的值发生变化时，它总计仅中该列中的所有其他输入值，并将总数放在带有columnTotal类的范围内。专栏的底部。

我知道挂钩到任何输入更改事件的jquery，我只是想知道如何在同一列中获取其他输入。到目前为止，我只能得到所有输入或没有。

Answer 1

function addUp(){
    $(".column").each(function(){
        var total = 0;
        $(this).find(".cell input").each(function(){
            total += parseInt($(this).val());
        });
        $(this).find(".columnTotal").text(total);
    });
}
$("input").on("change keyup",function(){
    addUp();
});
addUp();

小提琴：http://jsfiddle.net/4937M/2/
摆弄第二栏：http://jsfiddle.net/4937M/3/

<小时/> 说明：在每列中添加输入，自动重新计算keyup或change事件。选择器可能需要更具体，具体取决于您使用它的位置。（例如，事件监听器的input选择器）

Answer 2

$('.inputs').keyup(function(){
var total = 0;
$(this).parent().parent().find("input").each(function(){
    total += parseInt($(this).val());
});
 $(this).parent().parent().find("span").html(total);
})

通过执行此操作，您可以根据需要添加任意数量的列，它仍然可以使用。它使用keyup事件，您可以将其更改为“更改”事件。

这是代码工作的JsFiddle。

http://jsfiddle.net/4XZAu/

Answer 3

只是发布了我想出的答案，似乎工作正常：

$(":text").change(function(){
    var column = $(this).parent().parent();
    var inputTotal = 0;
    var columnTotal = 0;
    column.find(":text").each(function(){
        inputTotal += parseInt($(this).val(), 10);
    });
    columnTotal = (inputTotal / 7).toFixed(1);
    column.find(".columnTotal").text(columnTotal);
});

感谢那些回答。

使用jquery对div列中的输入值进行总计

3 个答案: