Importing HTML Data into JavaScript

Question

I have a table in an HTML file set up as follows (this is only one line of the table)

    <tr>
   <td class = "numeric">0</td>
   <td class = "numeric">2</td>
   <td class = "numeric">3</td>
   <td class = "numeric">1</td>
   <td class = "numeric">4</td>
   <td class = "numeric" id="city3"> </td>
      </tr>

and I need to write a script that will retrieve the numbers in the table so that I can total them up. Suffice to say I am completely stuck with how to retrieve the information. Any help is appreciated.

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName — Meredith, May 28 '14 at 23:11
Where is your code, what have you tried? You can't just go "I tried and nothing worked, please write my code for me." — , May 28 '14 at 23:36
I'll just point out none of the answers below are using `parseInt` correctly: http://stackoverflow.com/questions/460172/how-do-i-add-an-integer-value-with-javascript-jquery-to-a-value-thats-returni — Jon P, May 28 '14 at 23:56
@JonP: We are using parseInt correctly since there are no floating point numbers. — sjkm, May 28 '14 at 23:59
@sjkm, no you are not. The Radix parameter should **always be specified**, please see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt. Nothing to do with floating point. — Jon P, May 29 '14 at 00:02

sjkm · Accepted Answer · 2014-05-28T23:22:17.493

if you want to achieve it using Native JavaScript (http://jsfiddle.net/S4XX2/1/)

var tds = document.getElementsByClassName('numeric');

var total = 0;

for(var i = 0; i < tds.length; i++) {
    var textValue = tds[i].innerHTML;
    if(textValue != '') {
        total += parseInt(textValue);   
    }
}

alert(total); // alerts the total sumed up

if you are using JQuery (http://jsfiddle.net/S4XX2/2/)

var total = 0;

$('td.numeric').each(function() {
    var textValue = $(this).text();
    if(textValue != '') {
        total += parseInt(textValue);  
    }
});

alert(total); // alerts the total sumed up

You need to check for NaN as he has a space in his TD. – user115014 May 29 '14 at 00:06 — user115014, May 29 '14 at 00:06

user115014 · Answer 2 · 2014-05-29T00:16:57.607

You will need to check for numbers (ints) as one of your tds is empty it will return an empty string or with the parseInt function it will return NaN. This will break any calculations you do later on.

The following requires jQuery but can easily be done with pure JS. It will check to see if it's a number and if not it will/should return 0 for those that aren't numbers and convert the 'string' numbers to actual ints for adding:

var total = 0;

$('td').each(function() {
    var num = parseInt(this.innerHTML, 10);  // Converts string to int. Added Radix as @JonP kindly pointed out.
    if (!isNaN(num)) {                       // Checks if all int are numbers and not NaN (not a number)
        total = total + num;                 // Just for clarity's sake this is written out fully
    }
});

alert(total);

Non jQuery way is this:

var rows = document.getElementsByClassName('numeric'),
    total = 0;

for(var i = 0; i < rows.length; i++) {
    var num = parseInt(rows[i].innerHTML, 10);
    if (!isNaN(num)) {
        total = total + num;
    }
}

alert(total);

EDIT: As @jonP pointed out if using parseInt(num, 10) you need to add a radix - which is the second parameter. Link to article explaining Radix. So line should read parseInt(this.innerHTML, 10)

You only need to check for NaN if there's a cell that contains a space. Please request a change in my code rather than just copying the answer. — sjkm, May 28 '14 at 23:57
It's not your code - I wrote it separately to what you posted, though I followed your helpful guidelines of posting a pure js version. He does have a space in his td. — user115014, May 29 '14 at 00:05

score 0 · Answer 3 · answered May 28 '14 at 23:26

A more compact way using native js functions instead of looping :

    var nums = document.getElementsByClassName('numeric');


 var total = nums.reduce(function(previousValue, currentValue, index, array){
   return previousValue + parseInt(array[index].innerHTML);
},0);

2652763 · Answer 4 · 2014-05-29T22:02:05.423

0

var items = document.getElementsByClassName('numeric');

var total = 0;

for (i = 0; i < items.length; i++) {
    var num = parseInt(items[i].innerHTML, 10) || 0; // converts to a number or zero if empty.
    total += num;   
}

document.getElementById('result').innerHTML = total;

Fiddle: http://jsfiddle.net/XJ5gS/

edited May 29 '14 at 22:02

answered May 28 '14 at 23:51

2652763

473
1
8
13

Your fiddle seems to be quite diferent from your actual answer. – Jon P May 29 '14 at 01:00
oops - not sure what happened there - edited to reflect – 2652763 May 29 '14 at 22:01

score -1 · Answer 5 · answered May 28 '14 at 23:14

-1

something like this:

var total;
$('td').each.(function() {
     total += $(this).val('td');
});

answered May 28 '14 at 23:14

pankijs

6,531
3
16
13

1

You need to mention that that requires jQuery, and your answer would be better for describing how to do it with just standard DOM accesses. (You may want to also suggest changes to the HTML to make it easier to process, such as adding an `id` attribute to the ``…) – Donal Fellows May 28 '14 at 23:40

Importing HTML Data into JavaScript

5 Answers5