CODEWITHSUNDEEP
javascripthtmlasp.net
user773737
user773737

Reputation:

How can I access elements inside a table in Javascript?

I have html that looks like this,

<table id="TableAddresses">
    <tbody>
                <tr>
                    <td>
                        string 1
                    </td>
                    <td>
                    <input type="hidden" id='ADDR_843886'
                    <div id='FLAG_843886'>Pending...</div>

                    </td>
                </tr>
                <tr>
                    <td>
                        string 2
                    </td>
                    <td>
                    <input type="hidden" id='ADDR_843886'
                    <div id='FLAG_843886'>Pending...</div>

                    </td>
                </tr>

How do I get all the strings inside of TableAddresses > tbody >tr > td[0]?

EDIT:

I was mistaken in tagging jquery. This is actually a asp.net project.

Upvotes: 0

Views: 3615

Answers (5)

Ram
Ram

Reputation: 144659

You can use the map method:

var strings = $('#TableAddresses td:first-child').map(function() {
    return $.trim( this.textContent || this.innerText );
}).get(); // ["string 1", "string 2"]

Alternatively you can read the HTMLTableElement's rows property: 

var rows = document.getElementById('TableAddresses').rows, 
    strings = [];

for (var i = 0; i < rows.length; i++) {
    if ( rows[i].cells[0] ) {
       strings.push( rows[i].cells[0].innerHTML );
    }  
}

http://jsfiddle.net/kvyUh/

Upvotes: 1

nietonfir
nietonfir

Reputation: 4881

There's an MDN article on this topic. In a nutshell, you need to traverse your table with standard means, mostly getElementsByTagName, see this jsBin (look in the console).

var table =  document.getElementById("TableAddresses");

var rows = table.getElementsByTagName("tr");
Array.prototype.forEach.call(rows, function(ele, idx) {
  console.log(ele.getElementsByTagName("td")[0].textContent.trim());
});

This snippet traverses each row of your table and outputs the textContent of the first <td> element. Please note that this will most likely not work out of the box on older IE versions iirc, but nothing that can't be shimmed. ;-)

Upvotes: 0

sabof
sabof

Reputation: 8192

You can try this:

document.getElementById('TableAddresses').firstChild.firstChild.firstChild.innerHTML

or with less legacy support:

document.querySelector('#TableAddresses td').innerHTML

Upvotes: 1

rolodex
rolodex

Reputation: 530

Using jQuery:

var myString = $('#tableAddress td:first').text()

Cheers!

Upvotes: 0

Mulan
Mulan

Reputation: 135197

An easy way would be to use querySelectorAll

var td = querySelectorAll("#TableAddresses tbody td")[0];

Otherwise you can do

var table = document.getElementById("TableAddresses");
var tbody = table.getElementsByTagName("tbody")[0];
var tr    = tbody.getElementsByTagName("tr")[0];
var td    = tr.getElementsByTagName("td")[0];
// etc

Upvotes: 1

Related Questions