homepage Welcome to WebmasterWorld Guest from 54.242.231.109
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Accessing table cell data within list items with javascript
Piggo




msg:4415994
 5:58 pm on Feb 9, 2012 (gmt 0)

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 <li> 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 (k=1; k<=lengthoflist; k++){

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

var celldata = mye.innerHTML;
}
}

Thanks for any advice on this.

 

penders




msg:4416044
 7:38 pm on Feb 9, 2012 (gmt 0)

... the td id is unique within each list item but not within the list as a whole obviously.


But this is invalid HTML. The ID must be unique in the document. The getElementById() method only exists on the document object, therefore this ID cannot be used. (Some browsers might let you break the standards on this one, but Chrome and IE8 (in standards mode) certainly don't.)

Fortunately you don't need this ID, you can traverse the DOM...

Just a couple of notes regarding the code you have posted... Some of the statements inside the loop do not need to be inside the loop, for instance, you already seem to know the lengthoflist but the first thing you do in the loop is to find the list in the DOM (presumably you found the list in the beginning in order to get lengthoflist?). Array indices start at 0, so you should initialise k=0, not k=1. And consequently the last item in the list is at index lengthoflist
-1. getElementsByTagName() returns a NodeList, so you need to get the first element from this list (ie. item(0)) in order to getElementsByTagName() of this element (not of the NodeList).

eg.
var myb = mya.getElementsByTagName("div")
[0];

This joins all the cell data together and spits it out at the end...
var cellData = ''; 
var listItems = document.getElementById('tester').getElementsByTagName('li');
for (var k = 0; k < listItems.length; k++) {
cellData += listItems[k].getElementsByTagName('td')[1].innerHTML;
}
document.write(cellData);

Piggo




msg:4416174
 8:27 am on Feb 10, 2012 (gmt 0)

Thanks for this. I'd forgotten about unique IDs, thanks for the reminder, I've corrected all of that now.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved