html - Loop table with javascript and read values inside td's - Stack Overflow

admin管理员组

文章数量:1332361

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.

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.

• javascript
• html

Share Improve this question Follow asked Oct 4, 2016 at 5:19 Code RatchetCode Ratchet 6,0291919 gold badges8484 silver badges150150 bronze badges 3

• var brand = table.rows[i].cells[0].querySelector("label").innerHTML (and note that you don't need the parentheses that you currently have on each line). – nnnnnn Commented Oct 4, 2016 at 5:23
• @nnnnnn thanks for the information however when using querySelector I get the following error: Cannot read property 'querySelector' of undefined – Code Ratchet Commented Oct 4, 2016 at 5:28
• That's because of the empty tr at the end of the table. – nnnnnn Commented Oct 4, 2016 at 5:47

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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

table.rows[i].cells[0] gives you a reference to the td itself. To get to the label and span elements you can use table.rows[i].cells[0].querySelector("label"), and to get the actual text you can use .innerHTML or .innerText.

Also, although they don't hurt, you don't need the parentheses around the right-hand-side expressions in your assignments.

So:

var brand =(table.rows[i].cells[0]);

bees:

var brand = table.rows[i].cells[0].querySelector("label").innerText;

And so on.

You will also need to remove the empty tr element at the end of your table, because otherwise you'll get an error when your loop tries to access its (non-existent) cells.

Expand the snippet to see it in context:

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

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

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

    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>
  
</tbody>
</table>

Alternatively, you can skip over the tds and use .querySelector() to get the bits you want more directly:

var brand = table.rows[i].querySelector('label[for="Name"]').innerText;

In context:

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

for(var i=1; i<table.rows.length;i++){
    var row = table.rows[i];
    var brand = row.querySelector('label[for="Name"]').innerText;
    var baseValue = row.querySelector('label[for="Value"]').innerText;
    var price = row.querySelector('label[for="UnitPrice"]').innerText;
    var total = row.querySelector('label[for="LineTotal"]').innerText;
    var quantity = row.querySelector('span.read-only').innerText;

    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>
  
</tbody>
</table>

(Of course, selectors like label[for="Name"] are a bit ugly, so you could give those elements a class instead and use ...querySelector(".Name") or whatever - up to you.)

I have implemented below code and I am getting proper values, you can check it.

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>


<table id="myTable">
  <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>
</table>
<br>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction()
 {
    var table=document.getElementById('myTable');
    var brand = "";

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

          brand += "<br/>" + (table.rows[i].cells[0].innerHTML);
          brand += "<br/>" + (table.rows[i].cells[1].innerHTML);
          brand += "<br/>" + (table.rows[i].cells[2].innerHTML);
          brand += "<br/>" + (table.rows[i].cells[3].innerHTML);
    }

    document.getElementById("demo").innerHTML = brand;

}
</script>

</body>
</html>

You can also use .text() property instead on InnerHTml it picks the value inside any selector except the input tag.

brand += "<br/>" + (table.rows[i].cells[0].text);

Your issue is that you are trying to traverse the nested DOM elements (i.e. dealing with spans and tags) but the next thing you know you have a paragraph inside td and you have the same issue again.

Better to solve your problem with a different approach altogether. I suggest to improve the class names to the elements you want to track. You are already on the right track with the 'currency' class:

<td class="currency">
  <label class="value" for="Value">10</label>
</td>
...
<td class="currency">
  <span class="value" class="read-only">
     1 
  </span>
</td>

var elements = document.querySelectorAll('.value')
elements.forEach(function(element) {
  console.log(element.textContent)
})

本文标签： htmlLoop table with javascript and read values inside td39sStack Overflow