CodeRatchet CodeRatchet - 2 months ago 6
HTML Question

Loop table with javascript and read values inside td's

I have the following

HTML
table which I'm trying to loop through the
td's


<table id="review-products">
<thead>
<tr>
<th>Product</th>
<th class="currency">Base Value</th>
<th class="currency">Unit Price</th>
<th class="currency">Line Total</th>
<th class="currency">Quantity</th>
</tr>
</thead>
<tbody>
<tr id="order-item-510" class="tst-orderItemRow">
<td>
<label for="Name">
Some Cool Description <!-- Get this -->
</label>
</td>
<td class="currency">
<label for="Value">
10 <!-- Get this -->
</label>
</td>
<td class="currency">
<label for="UnitPrice">
$199.00 <!-- Get this -->
</label>
</td>
<td class="currency">
<label for="LineTotal">
$199.00 <!-- Get this -->
</label>
</td>
<td class="currency">
<span class="read-only">
1 <!-- Get this -->
</span>
</td>
</tr>
<tr></tr>
</tbody>
</table>


and retrieve the given value with the following javascript.

var table=document.getElementById('review-products');

for(var i=1; i<table.rows.length;i++){

var brand =(table.rows[i].cells[0]);
var baseValue =(table.rows[i].cells[1]);
var price =(table.rows[i].cells[2]);
var total =(table.rows[i].cells[3]);
var quantity =(table.rows[i].cells[4]);

var string1 = brand + baseValue + price + total + quantity;

console.log(brand);
}


Unfortunately as each
td
has a
label
or a
span
tag it doesn't return what I expect i.e the text. Instead it returns me the
html
I've tried using innerHtml however this produces an error which is TypeError: Cannot read property 'innerHTML' of undefined.

Can someone please shown or tell me how I go about dealing with
labels
or
span
tags that are nested within
td's
so I can correctly retrieve the values.

I can only use
javascript
for this.

Answer
  • Use Node.textContent to get the text context of Node
  • Check for table.rows[i].cells.length in loop as you have empty <tr> element.

var table = document.getElementById('review-products');

for (var i = 1; i < table.rows.length; i++) {
  if (table.rows[i].cells.length) {
    var brand = (table.rows[i].cells[0].textContent.trim());
    var baseValue = (table.rows[i].cells[1].textContent.trim());
    var price = (table.rows[i].cells[2].textContent.trim());
    var total = (table.rows[i].cells[3].textContent.trim());
    var quantity = (table.rows[i].cells[4].textContent.trim());
    var string1 = brand + baseValue + price + total + quantity;
    console.log(string1);
  }
}
<table id="review-products">
  <thead>
    <tr>
      <th>Product</th>
      <th class="currency">Base Value</th>
      <th class="currency">Unit Price</th>
      <th class="currency">Line Total</th>
      <th class="currency">Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr id="order-item-510" class="tst-orderItemRow">
      <td>
        <label for="Name">
          Some Cool Description
          <!-- Get this -->
        </label>
      </td>
      <td class="currency">
        <label for="Value">
          10
          <!-- Get this -->
        </label>
      </td>
      <td class="currency">
        <label for="UnitPrice">
          $199.00
          <!-- Get this -->
        </label>
      </td>
      <td class="currency">
        <label for="LineTotal">
          $199.00
          <!-- Get this -->
        </label>
      </td>
      <td class="currency">
        <span class="read-only">
                    1 <!-- Get this -->
                </span>
      </td>
    </tr>
    <tr></tr>
  </tbody>
</table>