CODEWITHSUNDEEP
javascript
Doug Fir
Doug Fir

Reputation: 21282

Getting the content of a table td in console

This is proving surprisingly tricky. Attached is a screen of what I want from the DOM:

enter image description here

I want the innerHTML (Or at least I thought I did) of the td with class product-price.

Here's another screen of all the stuff I've tried and the output: enter image description here

How do I get the console to return $59.99? Important it comes from the first element not the second where 59.99 also exists

Following a comment, here is the broader html:

<table cellspacing="1" class="store_location_list">


            <tr>
                <th class="item-type">Item<br />Type</th>
                <th class="item-desc">Item<br />Description</th> 
                <th class="total-qty">Total<br />Quantity</th>
                <th class="product-price">Product<br/>Price</th>
                <th class="total-price">Total<br/>Price</th>
                <th class="removeItemLink"> </th>
            </tr>

            <tr>
                <td class="item-type">Metal Wall Art</td>
                <td class="product-description-long">Metal Wall Art</td>
                <td class="total-qty">1</td>

         <!-- ************************************** -->       
                <td class="product-price">$59.99</td>
                <td class="total-price">$59.99</td>
                <td class="removeItemLink"><a href="#" onclick="__doPostBack('order_summary_remove_product', 'RetailerProductID_137'); return false;">Remove</a></td>
            </tr>


</table>

Upvotes: 0

Views: 148

Answers (4)

hityagi
hityagi

Reputation: 5256

document.querySelectorAll('.product-price')

will return an array of elements with the given class.

document.querySelectorAll('.product-price')[n]

will give you (n+1)th element with the class

.innerHTML : will give you html content inside it, i.e. even the tags.

.textContent : will give you only text, no html tags.

Upvotes: 1

SrJoven
SrJoven

Reputation: 206

document.querySelector('td.product-price').innerHTML

Upvotes: 1

j08691
j08691

Reputation: 207943

Use:

document.querySelectorAll('.product-price')[1].innerHTML

jsFiddle example

querySelector only returns the first match, while querySelectorAll returns all of them (hence the [1]) notation to get the second element. You can also use textContent in place of innerHTML as it works a little faster, but you won't notice much of a difference in your case.

Upvotes: 1

Barto
Barto

Reputation: 377

What you want are the properties: innerText and innerHTML. But you are selecting the correct item. You select all elements that have the product-price class, and the title of the table has that class. I recommend you first to ensure you select the correct item.

Upvotes: 0

Related Questions