How to sum the values of not empty <td> elements in Javascript or JQuery

Question

I am trying to make a sum total of all the html inside of <td> elements with name='gross_val'. I have following <td> elements:

<tr><td name="gross_val" align="right" title="gross_val1" ></td></tr>
<tr><td name="gross_val" align="right" title="gross_val2" ></td></tr>
<tr><td name="gross_val" align="right" title="gross_val3" ></td></tr>
<tr><td name="gross_val" align="right" title="gross_val4" ></td></tr>
<tr><td name="gross_val" align="right" title="gross_val5" ></td></tr>

All of these <td> elements have been dynamically populated with values in them. Some of these <td> elements have gross total values of the <tr> they are inside and some of them have not been populated yet. I just want to sum those <td> elements who have been populated with gross total values. And then show that value in another <td> element.

I have written the following JQuery and Javascript for this:

    function computeGrossValTotal() {
        var x = $("td[name='gross_val']");
        var gValues = [];
        $(x).each(function(index) {
            // this line takes up the raw html inside of that td element
            var valc = $(this).html();
            // this line strips all the currency and other characters and symbols
            // off the 'valc' variable and makes it in an integer format
            var val = Number(WC(valc));
            if (val) {
                gValues.push(val);
            }
        });
        // this line adds the values inside of gValues array
        sum = Number(gValues.reduce(add, 0));
        alert(sum);
    }
    $(document).on("keyup", function() {
        computeGrossValTotal();
    });
   function WC(x) { return Number(x.match(/(?:\d+|\.)/g).join("")); }
   function add(a, b) {return a + b;}

The problem I am facing is that sum does not alert unless all the <td> elements have some html inside of them. I cannot get to remove the empty td elements from the equation. Please can someone guide me as to how to only sum the <td> elements who have some value inside of them.

"WC is not defined". Please provide the code for that function. — MJH
– MJH, Commented Sep 18, 2016 at 23:22
function WC(x) { return Number(x.match(/(?:\d+|\.)/g).join("")); } — UmarAbbasKhan
– UmarAbbasKhan, Commented Sep 18, 2016 at 23:24
Maybe try: var valc = $(this).html() || "0"; Otherwise, please post the WC code — Theodoros Klikas
– Theodoros Klikas, Commented Sep 18, 2016 at 23:25
Also, please modify your HTML so as to illustrate what you mean by "Some of these <td> elements have gross total values of the <tr> they are inside". — MJH
– MJH, Commented Sep 18, 2016 at 23:25
Do you get any error on the console when the alert fails to appear? — traktor
– traktor, Commented Sep 18, 2016 at 23:27

Barmar · Accepted Answer · 2016-09-18 23:32:16Z

1

WC needs to check that x.match() finds something, so it doesn't call join on null.

function WC(x) {
    var nums = x.match(/(?:\d+|\.)/g);
    if (nums) {
        return Number(nums.join(''));
    } else {
        return null;
    }
}

answered Sep 18, 2016 at 23:32

Barmar

789k57 gold badges554 silver badges668 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

UmarAbbasKhan Over a year ago

Thanks a lot Barmar. This is solution is perfect. I now understand what had I done wrong.

Theodoros Klikas · Accepted Answer · 2016-09-18 23:31:21Z

x.match([[regex]]) will either return an array of matches or null if it doesn't match the regex.

When you have an element without html, you and you do $(element).html(), you will get an empty string so x.match([[regex]]) will not match your empty string and return null. Then you will try to do .join("") on a null and you will get an error.

As I posted in a comment, you can either do something like:

var valc = $(this).html() || "0";

Or, In your case, I would modify the WC function to guard it from trying to execute .join on a null and make it return a 0 (since it won't affect your addition) in the case that .match returns null.

Collectives™ on Stack Overflow

How to sum the values of not empty <td> elements in Javascript or JQuery

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related