get elements from an HTML table using javascript

Question

This is my HTML

<td class="style1 product name" valign="top" nowrap>23$</td>, 
<td style="padding-left:10px;" class="product name" width="85%">productY</td>
<td class="style1 product name" valign="top" nowrap>10$</td>, 
<td style="padding-left:10px;" class="product name" width="85%">productX</td>

I tried the script below, but this is returning the full html.

document.getElementsByClassName("product name")

How can i make it work so that it would return productX and productY in an array?

please let me know thanks

Consider looping through the array that .getElementsByClassName returns and using a conditional to push only elements you want to a new array. — Joshua
– Joshua, Commented Nov 16, 2016 at 22:20

Rick Hitchcock · Accepted Answer · 2016-11-16 22:35:08Z

1

Classes cannot contain spaces, so class="product name" is actually two classes: product and name.

Given your current HTML, you can use document.querySelectorAll('.product.name:not(.style1)') to grab the elements with classes product and name, while excluding those having class style1.

You can iterate through this list, grabbing the text content of each element like so:

var products = document.querySelectorAll('.product.name:not(.style1)'),
    a = [],
    i;

for(i = 0 ; i < products.length ; i++) {
  a.push(products[i].textContent);
}

console.log(a);

<table>
  <tr>
    <td class="style1 product name" valign="top" nowrap>23$</td>
    <td style="padding-left:10px;" class="product name" width="85%">productY</td>
    <td class="style1 product name" valign="top" nowrap>10$</td>
    <td style="padding-left:10px;" class="product name" width="85%">productX</td>
  </tr>
</table>

answered Nov 16, 2016 at 22:35

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

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

3 Comments

Sam Over a year ago

thanks, but i am getting undefined. However when i use this document.querySelectorAll('.product name:not(.style1)')[0].textContent; It is giving me the product 0 name. How can i add this in the loop to get the other products name?

Rick Hitchcock Over a year ago

Do you see undefined when you run the Snippet?

Sam Over a year ago

thanks for your help - this one worked - var x = Array.from(document.querySelectorAll(".product.name:not(.style1)"));

RizkiDPrast · Accepted Answer · 2016-11-16 22:35:00Z

1

please try this one

var x = Array.from(document.querySelectorAll(".product.name:not(.style1)"));

console.log(x);

<table>
  <tr>
    <td class="style1 product name" valign="top" nowrap>23$</td>,
    <td style="padding-left:10px;" class="product name" width="85%">productY</td>
    <td class="style1 product name" valign="top" nowrap>10$</td>,
    <td style="padding-left:10px;" class="product name" width="85%">productX</td>
  </tr>
</table>

answered Nov 16, 2016 at 22:35

RizkiDPrast

1,7251 gold badge15 silver badges22 bronze badges

1 Comment

RizkiDPrast Over a year ago

previously i use iteration using Array.protoype.filter.call(x,function(elm){...}), thanks to @RickHitchCock for his simplest syntax :not(.style1)

magic-sudo · Accepted Answer · 2016-11-16 22:18:10Z

0

var elements = document.getElementsByClassName("product name") creates and array of elements with class name product name. Then you can acces this array like this elements[0]...etc.

Product name must be one word product-name because now your td has 3 classes

answered Nov 16, 2016 at 22:18

magic-sudo

1,2669 silver badges15 bronze badges

Comments

Asaph · Accepted Answer · 2016-11-16 22:19:21Z

0

In your example, you have 2 classes applied to elements with class="product name". The first class is product and the second class is name. In HTML, multiple CSS classes are separated by spaces. Instead, try to use "product_name" (with an underscore).

HTML:

<td class="style1 product name" valign="top" nowrap>23$</td>, 
<td style="padding-left:10px;" class="product_name" width="85%">productY</td>
<td class="style1 product name" valign="top" nowrap>10$</td>, 
<td style="padding-left:10px;" class="product_name" width="85%">productX</td>

Javascript:

document.getElementsByClassName("product_name")

answered Nov 16, 2016 at 22:19

Asaph

163k25 gold badges204 silver badges204 bronze badges

1 Comment

Asaph Over a year ago

Then use document.getElementsByClassName("product") and then of that group, check if each one also has a class of "name" as well. As written, it's 2 separate classes.

Tyr · Accepted Answer · 2016-11-16 22:22:00Z

0

Add something like product-item as classname to your product elements:

var products = document.getElementsByClassName("product-items");
for (var i = 0; i<products.length; i++) {
    console.log(products[i].innerText);
}

answered Nov 16, 2016 at 22:22

Tyr

2,7561 gold badge15 silver badges21 bronze badges

Collectives™ on Stack Overflow

get elements from an HTML table using javascript

5 Answers 5

3 Comments

1 Comment

Comments

HTML:

Javascript:

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

1 Comment

Comments

HTML:

Javascript:

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related