Creating a JavaScript function that calculates the sum of values in a table

Question

Creating a JavaScript function that calculates the sum of values in a table

Here is a snippet of my HTML code:

<TR Row="1" CLASS="ThemeAlignCenter">
                <TD id="wrdActive_Row1" style="width: 50px"
                    CLASS="rdThemeDataTableCell"><SPAN id="lblactive_Row1">6</SPAN></TD>

... more rows

I am looking to include a JavaScript at the bottom of the page to sum up all the values of lblactive_row1 whenever it appears on the page (in this example, the number 6).

Edit: more source

    <TABLE style="" border="0" CLASS="rdThemeDataTable" id="dtWardData"
                cellspacing="0">
                <COL id="wrdActive"></COL><COL id="wrdOccupied"></COL>
                <TR Row="1" CLASS="ThemeAlignCenter">
                    <TD id="wrdActive_Row1" style="width: 50px"
                        CLASS="rdThemeDataTableCell"><SPAN id="lblactive_Row1">4</SPAN></TD>
                    <TD id="wrdOccupied_Row1" style="width: 50px"
                        CLASS="rdThemeDataTableCell"><SPAN id="lblOccupied_Row1">4</SPAN></TD>
                </TR>
            </TABLE>

   <TABLE style="" border="0" CLASS="rdThemeDataTable" id="dtWardData"
                cellspacing="0">
                <COL id="wrdActive"></COL><COL id="wrdOccupied"></COL>
                    <TD id="wrdActive_Row1" style="width: 50px"
                        CLASS="rdThemeDataTableCell"><SPAN id="lblactive_Row1">6</SPAN></TD>
                    <TD id="wrdOccupied_Row1" style="width: 50px"
                        CLASS="rdThemeDataTableCell"><SPAN id="lblOccupied_Row1">2</SPAN></TD>
                </TR>
            </TABLE>

    Repeat...

This pattern continues for around 10 tables within the same source. I cannot modify the generated HTML as it comes from a third-party tool. My only option is to add a small script at the end of the page.

javascript

Answer 1

Answer №1

When it comes to selecting elements from your HTML, the approach may vary depending on whether you are using jQuery or not.

If you are utilizing jQuery, the following code snippet could be helpful:

var total = 0;
$('table tr.ThemeAlignCenter > td.rdThemeDataTableCell > span').each(function(i) {
    total += parseInt($(this).text());
});

For those working without jQuery and assuming that your <table> element has an id of data, consider a solution like this:

var tbl = document.getElementById('data');
var cells = tbl.getElementsByTagName('td');

var total = 0;
for (var i = 0, limit = cells.length; i < limit; i++) {
    var td = cells[i];
    if (td.className === 'rdThemeDataTableCell') {
        var elem = td.getElementsByTagName('span')[0];
        total += parseInt(elem.innerHTML);
    }
}

UPDATE: The code has been refactored to handle multiple tables (in case changing the table IDs is not an option):

function sumTable(tbl) {
    var cells = tbl.getElementsByTagName('td');

    var total = 0;
    for (var i = 0, limit = cells.length; i < limit; i++) {
        var td = cells[i];
        if (td.className === 'rdThemeDataTableCell') {
            var elem = td.getElementsByTagName('span')[0];
            total += parseInt(elem.innerHTML);
        }
    }

    return total;
}

var tables = document.getElementsByTagName('table');
var results = [];
for (var i = 0, limit = tables.length; i < limit; i++) {
    var total = sumTable(tables[i]);
    results.push(total);
}

Answer 2

When it comes to selecting elements from your HTML, the approach may vary depending on whether you are using jQuery or not.

If you are utilizing jQuery, the following code snippet could be helpful:

var total = 0;
$('table tr.ThemeAlignCenter > td.rdThemeDataTableCell > span').each(function(i) {
    total += parseInt($(this).text());
});

For those working without jQuery and assuming that your <table> element has an id of data, consider a solution like this:

var tbl = document.getElementById('data');
var cells = tbl.getElementsByTagName('td');

var total = 0;
for (var i = 0, limit = cells.length; i < limit; i++) {
    var td = cells[i];
    if (td.className === 'rdThemeDataTableCell') {
        var elem = td.getElementsByTagName('span')[0];
        total += parseInt(elem.innerHTML);
    }
}

UPDATE: The code has been refactored to handle multiple tables (in case changing the table IDs is not an option):

function sumTable(tbl) {
    var cells = tbl.getElementsByTagName('td');

    var total = 0;
    for (var i = 0, limit = cells.length; i < limit; i++) {
        var td = cells[i];
        if (td.className === 'rdThemeDataTableCell') {
            var elem = td.getElementsByTagName('span')[0];
            total += parseInt(elem.innerHTML);
        }
    }

    return total;
}

var tables = document.getElementsByTagName('table');
var results = [];
for (var i = 0, limit = tables.length; i < limit; i++) {
    var total = sumTable(tables[i]);
    results.push(total);
}

Answer 3

Answer №2

If you need a solution, consider implementing the following:

function countRows() {
    var count = 0;
    var divs = document.getElementsByTagName('div');

    for(var j=0; j<divs.length; j++) {
        if(divs[j].getAttribute('class') === 'row') {
            count += parseInt( divs[j].innerHTML, 10);
        }
    }

    return count;
}

connect countRows() to an eventListener

Answer 4

If you need a solution, consider implementing the following:

function countRows() {
    var count = 0;
    var divs = document.getElementsByTagName('div');

    for(var j=0; j<divs.length; j++) {
        if(divs[j].getAttribute('class') === 'row') {
            count += parseInt( divs[j].innerHTML, 10);
        }
    }

    return count;
}

connect countRows() to an eventListener

Creating a JavaScript function that calculates the sum of values in a table

Answer №1

Answer №2

Similar questions

Issue with modal not being able to close the embedded video iframe

Alternative method for handling web requests in case JavaScript is not enabled

how to execute Vue-Js method just one time

Steps for interacting with a button of the <input> tag in Selenium using Python

Check if a specific string is present in an array using JavaScript

Unable to collapse the Bootstrap dropdown menu

Fetch information from the input field and send it to the Redux state

Using jQuery to reference my custom attribute---"How to Use jQuery to reference My

Navigating through the world of WebSQL data entry

Learning how to utilize localStorage in conjunction with a color picker to modify the --var of :root

Does the entire state get replaced every time a change is made if the state is immutable?

Form confirmation popup with JQuery displaying input values upon submission click

Troubleshooting: Angular 2 View not reflecting changes after array push

Adjust the height of an element using CSS based on the height of another

Item 'unreachable' displayed in Firefox console

What is the process of transforming a string into a JSON object?

Issues arise when attempting to utilize Async/Await with a gRPC method

Use JavaScript to limit Google Analytics and Yandex.Metrica to track only the referral sources and screen sizes

I am facing an issue with my react-app where it compiles successfully without any errors, but it is not rendering any elements

What is the best way to add a div container to a particular section of a webpage?