How to get and use table in html by javascript by getElementsByClassName()? - Stack Overflow

I want to detect an element in a table in HTML, but I can find the table in html(I think), I cannot detect the table...PS: I can not change the HTML.

This is DOM

This is my code

alert(document.getElementsByClassName('ep-dp-dt'));

I can get alert like

after, I want to detect the table or use the table, but i can't.. I use the table like this

document.getElementsByClassName('ep-dp-dt').rows

and my programme crashes, it can not find rows.....

In the html like I have posted, How to get and use table html? Could you give me some code? Thank you !

I want to detect an element in a table in HTML, but I can find the table in html(I think), I cannot detect the table...PS: I can not change the HTML.

This is DOM

This is my code

alert(document.getElementsByClassName('ep-dp-dt'));

I can get alert like

after, I want to detect the table or use the table, but i can't.. I use the table like this

document.getElementsByClassName('ep-dp-dt').rows

and my programme crashes, it can not find rows.....

In the html like I have posted, How to get and use table html? Could you give me some code? Thank you !

• javascript
• html
• xml
• google-chrome-extension

Share Improve this question Follow edited Jun 13, 2016 at 13:41 user2262304 asked Jun 13, 2016 at 13:03 user2262304user2262304 34911 gold badge33 silver badges1010 bronze badges 3

• "This is HTML" - no it isn't; that's a picture of the DOM. Please add your ("[MCVE]") HTML to your question. – David Thomas Commented Jun 13, 2016 at 13:08
• 1 I feel there are way to many answers to this simple question...I'm counting myself out. – dayuloli Commented Jun 13, 2016 at 13:19
• but for now. none of them works... – user2262304 Commented Jun 13, 2016 at 13:20

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

First getElementsByClassName method returns an HTMLCollection or NodeList so to get the table you have to get the element from returned collection like this

var table = document.getElementsByClassName('ep-dp-dt')[0];

And then you can get and iterate through rows of table element, something like this

for (var i = 0;i < table.rows.length; i++) {
     var row = table.rows[i];

}

For increased patibility (IE 8, for example, does not support getElementsByClassName() whereas it does support querySelector()) I'd suggest using document.querySelector(), which will return the only first matching Node – rather than a NodeList – matching a supplied CSS selector:

var table = document.querySelector('.ep-dp-dt'),
    rows = table.rows;

The above will first retrieve the <table> element (assuming it both exists and is the first element in the document matching the .ep-dp-dt selector) and then use that Node to retrieve the collection of <tr> elements and store them in the rows variable.

Obviously to work with the <tr> elements you'll need to iterate over the collection, using either a for loop:

for (var i = 0, len = rows.length; i<len; i++){
    console.log(rows[i]);
}

Or you could instead use Array methods, if you first convert the Array-like HTMLCollection into an Array using Array.from():

Array.from( rows ).forEach(function(tr) {
    console.log(tr);
});

Or, as Array.from() is from ES6, and you may need to support older browsers the following alternative is possible:

Array.prototype.slice.call(rows, 0).forEach(function(tr) {
    console.log(tr);
});

It's worth noting, at this point, that while document.querySelector() will return the first node matching the given selector it will, if no element matching that selector is found within the document, return null; which means that it may be worth testing for the existence of the table variable before attempting to retrieve the rows collection:

var table = document.querySelector('.ep-dp-dt'),
    rows;

if (table) {
    rows = table.rows;
}

getElementsByClassName returns a list of elements, having that class. Either give element an id and use getElementById() or if you are sure, that only one element has the class, use document.getElementsByClassName('ep-dp-dt')[0]

getElementsByClassName will return array of elements even if it's one element in page. You must select desired index of class (in your case it would be 0)

console.log(document.getElementsByClassName('ep-dp-dt')[0].rows);

<table class="ep-dp-dt">
  <tr>
    <td>A</td>
  </tr>
</table>

getElementsByClassName returns an array of elements. To select the first element, you need to add [0], like so:

document.getElementsByClassName('ep-dp-dt')[0]

Then to get the rows, try one of the following:

document.getElementsByClassName('ep-dp-dt')[0].rows
document.getElementsByClassName('ep-dp-dt')[0].getElementsByTagName('tr')

You'll get an array of each row.