CODEWITHSUNDEEP
javascripthtml-table
Arnas Pecelis
Arnas Pecelis

Reputation: 149

Retrieve html table contents of TD anchor with Javascript

I can not understand how to grab for example href attribute inside table row cell. When I'm trying to do that it seems that second loop does not work for selected TR elements

function asd(){
    this.container = document.getElementsByClassName("cart-contents")[0];
    if (!this.container){
        return false;
    }

    this.itemsContainer = 
    this.container.getElementsByClassName("minicart-table")[0];
    this.itemsTable = this.itemsContainer.getElementsByClassName("views-table")[0];
    this.cartDetails = [];

    for (var i = 0, row; row = this.itemsTable.rows[i]; i++) {
        for (var j = 0, col; col = row.cells[j]; j++) {
            console.log(col[0].getElementsByTagName("a")[0].getAttribute("href"));
        }
        console.log('________________');
    }
}
asd();
<div class="cart-contents">
<div class="minicart-table">
    <table class="views-table">
        <tbody>
          <tr>
            <td class="views-field-field-product-image"><a href="url">text</a></td>
            <td class="tg-yw4l"></td>
           </tr>
        </tbody>
      </table>
  </div>
</div>

Upvotes: 0

Views: 715

Answers (2)

ernesthm
ernesthm

Reputation: 421

Use col instead col[0]

function asd(){
    this.container = document.getElementsByClassName("cart-contents")[0];
    if (!this.container){
        return false;
    }

    this.itemsContainer = 
    this.container.getElementsByClassName("minicart-table")[0];
    this.itemsTable = this.itemsContainer.getElementsByClassName("views-table")[0];
    this.cartDetails = [];

    for (var i = 0, row; row = this.itemsTable.rows[i]; i++) { 
        // only the first column
        col = row.cells[0];
        var anchor = col.getElementsByTagName("a")[0];
        if (anchor !== undefined) {
            console.log(anchor.getAttribute("href"));   
        }        
        console.log('________________');
    }
}
asd();
<div class="cart-contents">
<div class="minicart-table">
    <table class="views-table">
        <tbody>
          <tr>
            <td class="views-field-field-product-image"><a href="url">text</a></td>
            <td class="tg-yw4l"></td>
           </tr>
        </tbody>
      </table>
  </div>
</div>

Upvotes: 1

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

Use querySelector() for that. It is safe to use. Example:

var anchor = document.querySelector(".cart-contents a:first-child");

console.log(anchor.getAttribute("href"));
<div class="cart-contents">
<div class="minicart-table">
    <table class="views-table">
        <tbody>
          <tr>
            <td class="views-field-field-product-image"><a href="url">text</a></td>
            <td class="tg-yw4l"></td>
           </tr>
        </tbody>
      </table>
  </div>
</div>

Also, here is how to fix your code:

for (var i = 0, row; row = this.itemsTable.rows; i++) {
    for (var j = 0, col; col = row[i].cells; j++) {
        console.log(col[j].getElementsByTagName("a")[0].getAttribute("href"));
    }
}

Upvotes: 1

Related Questions