use JQuery to total cells in a row

Question

I'm using asp.net with master pages. I have a listview that is producing 8 rows. What I would like to use jQuery to do is, when someone enters a value in cell 1-7, when they leave the cell i'd like to calculate cells 1-7 and put that value in cell 8. So each row would have the calculation done. I've found some code to loop through the table

enter code here

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

});

but have not made any progress past that. In firebug, I see that the value i'm trying to get after is in the this/cells/1/childnodes. It looks like this

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

the html rendered looks like this

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

Any help would be great

score 0 · Answer 1 · answered Oct 03 '13 at 20:04

I am honestly not too familiar with ASP.NET, but in general jQuery terms, you could easily accomplish this by simply fetching cells by CLASSES, and update the 8th cell like that?

For example, 1) put a common class for your first 7 cells, ie "cell-to-fetch" 2) put a unique class for the last 8th cell, ie "cell-8" 3) on blur event of cell 7 (blur = focusOut http://api.jquery.com/blur/) just do a simple fetching and adding:

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

4) and finally just update your cell-8 with the result you get, like this:

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

Hope it helps, at least as a general concept.

score 0 · Answer 2 · answered Oct 03 '13 at 20:07

0

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

answered Oct 03 '13 at 20:07

Jakub Kotrs

5,823
1
14
30

thanks for the code.. I get an error that javascript runtime error object doesn't support property or method on. I'm using jquery pointing to http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js. also pointing to jquery-ui.min.js. could it be i'm not pointing t the correct jquery files? – jvcoach23 Oct 04 '13 at 12:18
@jvcoach23 You are using a very outdated version of jQuery that doesn't yet have the `on` method. I think it was `bind` in those times. – Jakub Kotrs Oct 04 '13 at 12:24
yep.. I updated the jquery and now it does not error. it's not quite what I need yet... it's totaling all of the columns 1-7 and all the rows together. I need the total of row 1, columns 1-7 and have the total be in column 8. Then do the same for row 2. The code is including inputs from column 0 which I need it not to do. I'll keep at it. Thanks for getting me started – jvcoach23 Oct 04 '13 at 12:40

score 0 · Answer 3 · answered Oct 03 '13 at 20:13

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

use JQuery to total cells in a row

3 Answers3