CODEWITHSUNDEEP
javascripthtml-tableinnerhtmlgetelementbyidgetelementsbytagname
T W
T W

Reputation: 459

Accessing table cell data within list items with Javascript

I'm creating a list dynamically and I need to be able to retrieve values from the table cells. The structure is:

<ul id="tester">
<li><div><table><tr><td></td><td id="samecellid">I WANT THIS TD VALUE..
<li><div><table><tr><td></td><td id="samecellid">I WANT THIS TD VALUE..
<li><div><table><tr><td></td><td id="samecellid">I WANT THIS TD VALUE..

Each list item has a table within it - this table only has one row, so the td id is unique within each list item but not within the list as a whole obviously.

The problem I have is I can't seem to get the value of the td cell. I have tried several ways, this is my latest and it doesn't work:

if (lengthoflist > 0) {    
    for (i=1; i<=lengthoflist; i++){    

    var ul = document.getElementById("tester");
    var mya = ul.getElementsByTagName("li")[i];                     
    var myb = mya.getElementsByTagName("div");      
    var myc = myb.getElementsByTagName("table");
    var myd = myc.getElementsByTagName("tr");
    var mye = myd.getElementById("samecellid");

    var celldata = mye.innerHTML;
}
}

Upvotes: 0

Views: 2648

Answers (4)

mrtsherman
mrtsherman

Reputation: 39872

Retrieve the li tags in your loop, then get the last td in each li. I modified your posted code a bit. You started your loop at 1, which means that you wouldn't retrieve the first list item. Arrays are 0 indexed, so start at 0. In length of list you used <= which would include a nonexistent element at the end of the list.

var liTags = document.getElementById("tester").getElementsByTagName('li'); 

for (var i = 0; i < liTags.length; i++) {
    var tdTags = liTags[i].getElementsByTagName('td');
    var celldata = tdTags[tdTags.length - 1].innerHTML; //last td
    console.log(celldata);
}

Update:

Here is a slightly more efficient method.

var liTags = document.getElementById("tester").getElementsByTagName('li'); 

for (var i = 0; i < liTags.length; i++) {
    var celldata = liTags[i].getElementsByTagName('tr')[0].lastChild.innerHTML;  //last td
    console.log(celldata);
}

Upvotes: 0

sinsedrix
sinsedrix

Reputation: 4775

getElementsByTagName returns an array so it's better like that:

if (lengthoflist > 0) {  
    var ul = document.getElementById("tester");

    for (i=1; i<=lengthoflist; i++) {    

        var mya = ul.getElementsByTagName("li")[i];                     
        var myb = mya.getElementsByTagName("div")[0];      
        var myc = myb.getElementsByTagName("table")[0];
        var myd = myc.getElementsByTagName("tr")[0];
        var mye = myd.getElementsByTagName("td")[1]; // the second

        var celldata = mye.innerHTML;
    }
}

But of course with a unique ID on td tags you can get it straight.

Upvotes: 1

Stig Hausberg
Stig Hausberg

Reputation: 836

Do something like this.

<ul id="tester">
<li><div><table><tr><td></td><td id="samecellid1">I WANT THIS TD VALUE..
<li><div><table><tr><td></td><td id="samecellid2">I WANT THIS TD VALUE..
<li><div><table><tr><td></td><td id="samecellid3">I WANT THIS TD VALUE..

if (lengthoflist > 0) {    
    for (i=1; i<=lengthoflist; i++){
      var mye = document.getElementById("samecellid" + i);

      var celldata = mye.innerHTML;
  }
}

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

If you used unique IDs you can get them directly without going down the HTML tree:

var mye = myd.getElementById("samecellid");
var myeA = myd.getElementById("samecellidA");

Upvotes: 0

Related Questions