using javascript to extract elements from an HTML table

Question

using javascript to extract elements from an HTML table

I have some HTML code that I need help with.

<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 attempted to use the script below, but it's returning the full HTML instead of just the product names:

document.getElementsByClassName("product name")

Can anyone provide me with guidance on how to modify this script so that it returns an array containing productX and productY?

Your help is greatly appreciated.

javascript html css

Answer 1

Answer №1

It's important to note that classes cannot contain spaces, so class="product name" is essentially defining two separate classes: product and name.

If you want to target elements with both the product and name classes but exclude those with the style1 class, you can use the query selector

document.querySelectorAll('.product.name:not(.style1)')

.

To extract the text content of each targeted element, you can iterate through the list like this:

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>

Answer 2

It's important to note that classes cannot contain spaces, so class="product name" is essentially defining two separate classes: product and name.

If you want to target elements with both the product and name classes but exclude those with the style1 class, you can use the query selector

document.querySelectorAll('.product.name:not(.style1)')

.

To extract the text content of each targeted element, you can iterate through the list like this:

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>

Answer 3

Answer №2

Feel free to give this a shot

let elements = Array.from(document.querySelectorAll(".product.name:not(.style1)"));

console.log(elements);

<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>

Answer 4

Feel free to give this a shot

let elements = Array.from(document.querySelectorAll(".product.name:not(.style1)"));

console.log(elements);

<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>

Answer 5

Answer №3

const items = document.getElementsByClassName("product name")

forms an array of elements with the class name product name. You can then access this array using indices like items[0] and so on.

The product name should be a single word like product-name to avoid having multiple classes in your td.

Answer 6

const items = document.getElementsByClassName("product name")

forms an array of elements with the class name product name. You can then access this array using indices like items[0] and so on.

The product name should be a single word like product-name to avoid having multiple classes in your td.

Answer 7

Answer №4

Consider the example where two classes are assigned to elements with class="product name". The first class is product, while the second one is name. In HTML, CSS classes should be separated by spaces. To improve this, you can use "product_name" instead (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")

Answer 8

Consider the example where two classes are assigned to elements with class="product name". The first class is product, while the second one is name. In HTML, CSS classes should be separated by spaces. To improve this, you can use "product_name" instead (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")

Answer 9

Answer №5

When styling your product elements, remember to include the classname product-item:

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

Answer 10

When styling your product elements, remember to include the classname product-item:

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

using javascript to extract elements from an HTML table

Answer №1

Answer №2

Answer №3

Answer №4

HTML:

Javascript:

Answer №5

Similar questions

Combining Node and React: Using CSS Class Names with Hyphens

What is the best way to accurately determine the height and offset values of an element while utilizing ng-repeat?

Unable to render Blender model in threeJS scene due to undefined condition

Is there a streamlined approach to reducing the code for an Angular Bootstrap card with a fixed length and height?

Retrieving a specific Project ID from Asana Task API using Node.js and parsing the JSON response

Using the OR condition in the ternary operator within ReactJS

JavaScript shortening a string while joining it

Tips for concealing elements beyond div boundaries

Looking to retrieve the AssetLoadedFunc properties in the LoadAssets function? Wondering if you should use TypeScript or JavaScript

Displaying a page with dynamic data fetched from the server-side to be utilized in the getInitialProps method of

A guide on using Javascript to write information to a JSON file

Can JSON.parse be used on only a portion of an object in JavaScript?

Convert CSV into an object with additional attribute

Discover the final index of an array with Angular's ng-repeat functionality

Having trouble with connect-busboy not calling the callback when using NodeJS, AngularJS, and File Upload?

What is the best way to present these values with spaces in between each word?

Is it considered ineffective to define default CSS rules?

Analyze data with diverse structures using crossfiltering technology

The AJAX function is failing to return false

Exploring the power of NodeJS with nested functions for conducting in-depth search