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

Answer 1

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