使用 JQuery 对一行中的单元格进行总计答案

【问题标题】：use JQuery to total cells in a row使用 JQuery 对一行中的单元格进行总计
【发布时间】：2013-10-10 16:15:59
【问题描述】：

我正在使用带有母版页的 asp.net。我有一个产生 8 行的列表视图。我想使用jQuery做的是，当有人在单元格1-7中输入一个值时，当他们离开单元格时我想计算单元格1-7并将该值放入单元格8中。所以每一行都会有计算完成。我找到了一些循环遍历表格的代码

enter code here

$(document).ready(function () {
$('#ctl00_ContentPlaceHolder1_lvOccLine_ctrl0_tbltblOccLineList tr').each(function () {
    $(this).find('td').each(function () {
    })
})

});

但没有取得任何进展。在萤火虫中，我看到我试图获得的值在 this/cells/1/childnodes 中。看起来是这样的

NodeList[input#ctl00_ContentPlaceHolder1_lvOccLine_ctrl0_txtCacasian attribute value = "1"]

渲染出来的html是这样的

<input type="text" style="width:100%;" id="ctl00_ContentPlaceHolder1_lvOccLine_ctrl0_txtCacasian" value="1" name="ctl00$ContentPlaceHolder1$lvOccLine$ctrl0$txtCacasian">

任何帮助都会很棒

【问题讨论】：

标签： jquery html-table jquery-calculation

【解决方案1】：

老实说，我对 ASP.NET 不太熟悉，但在一般的 jQuery 术语中，您可以通过简单地按 CLASSES 获取单元格并像这样更新第 8 个单元格来轻松完成此操作？

例如， 1) 为您的前 7 个单元格放置一个通用类，即“cell-to-fetch” 2) 为最后的第 8 个单元格放置一个唯一的类，即“cell-8” 3) 关于单元格 7 的模糊事件 (blur = focusOut http://api.jquery.com/blur/) 只需做一个简单的获取和添加：

$(this).find('.cell-to-fetch').each(function () {
    $total += $(this).val();
})

4) 最后用你得到的结果更新你的 cell-8，像这样：

$('.cell-8').val($total);

希望它有所帮助，至少作为一般概念。

【讨论】：

【解决方案2】：

Demo

$(document).ready(function () {
    $('#ctl00_ContentPlaceHolder1_lvOccLine_ctrl0_tbltblOccLineList input').on('change', function () { /* bind change to input */
        var sum = 0,
            $this = $(this).parents('tr');
        $this.find('input').each(function() { /* find all inputs in the row */
            var value = parseInt(this.value);
            sum += value % 1 == 0 ? value : 0; /* add values together */
        });
        $this.find('td').last().text(sum); /* output sum into last column */
        return true;
    });
});

【讨论】：

感谢代码。我收到一个错误，即 javascript 运行时错误对象不支持属性或方法。我正在使用指向ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js 的jquery。还指向 jquery-ui.min.js。难道是我没有指向正确的 jquery 文件？
@jvcoach23 您正在使用一个非常过时的 jQuery 版本，它还没有 on 方法。我想当时是bind。
是的.. 我更新了 jquery，现在它没有错误。这还不是我所需要的……它将所有 1-7 列和所有行加在一起。我需要第 1 行、第 1-7 列的总数，并且总数在第 8 列。然后对第 2 行执行相同操作。代码包括来自第 0 列的输入，我不需要这样做。我会坚持下去的。感谢您让我开始

【解决方案3】：

http://jsfiddle.net/dKxW8/

$(document).ready(function () {
    $("#calc").click(function () {
        //first get number of rows in the table (because we have one input per row)
        var count = $("#mytable tr").length;

        //loop through the rows and get the sum of every input value except the last
        var sum = 0;
        for (var i = 0; i < (count - 1); i++) {
            //get the value and add it to sum
            //check if its a number
            if(!isNaN(parseInt($("#mytable tr").eq(i).find("input").val(), 10))){
                sum += parseInt($("#mytable tr").eq(i).find("input").val(), 10);
            }
        }

        //assign the last input's value (in last row) to the sum
        $("#mytable tr").eq(count - 1).find("input").val(sum);
    });
});

【讨论】：