Accessing table cell data within list items with Javascript

Question

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;
}
}

sinsedrix · Accepted Answer · 2012-02-09 18:04:05Z

1

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.

answered Feb 9, 2012 at 18:04

sinsedrix

4,8055 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

T W Over a year ago

Thanks for that, I have moved my ul up. Unfortuantely I can't have unique ids for the td elements as the list is dynamically created and I would have no way of knowing what the ids were when I came back to refer to them.

Stig Hausberg Over a year ago

this is not referencing the ids, but the index in the collection. It says pick td number 2 -> <tr> <td></td> <td id="samecellid">I WANT THIS TD VALUE..

mrtsherman · Accepted Answer · 2012-02-09 19:34:56Z

0

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);
}

edited Feb 9, 2012 at 19:34

answered Feb 9, 2012 at 18:05

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

3 Comments

T W Over a year ago

Thanks for this. The For Loop is actually looping through the list so I'll try with moving your var liTags up to before the For statement.

mrtsherman Over a year ago

@TW - I see. I updated my answer to reflect how I would do this.

T W Over a year ago

Thats just what i'd ended up with. This is great thanks and solved this problem. Thank you!

Diodeus - James MacFarlane · Accepted Answer · 2012-02-09 17:59:24Z

0

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");

answered Feb 9, 2012 at 17:59

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

Stig Hausberg · Accepted Answer · 2012-02-09 18:02:18Z

0

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;
  }
}

answered Feb 9, 2012 at 18:02

Stig Hausberg

8366 silver badges9 bronze badges

1 Comment

T W Over a year ago

This would eb a good solution but I can't have unique ids for the td elements as the list is dynamically created and I would have no way of knowing what the ids were when I came back to refer to them.

Collectives™ on Stack Overflow

Accessing table cell data within list items with Javascript

4 Answers 4

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related