Доступ к данным ячейки таблицы в элементах списка с помощью Javascript

Question

Я создаю список динамически, и мне нужно иметь возможность получать значения из ячеек таблицы.Структура:

<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..

В каждом элементе списка есть таблица. Эта таблица содержит только одну строку, поэтому идентификатор td уникален для каждого элемента списка, но, очевидно, не для всего списка.

Проблема в том, что я не могу получить значение ячейки td.Я пробовал несколько способов, это мой последний и он не работает:

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

getElementsByTagName возвращает массив, так что лучше вот так:

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

Но, конечно, с уникальным идентификатором на тд-тегах вы можете получить его прямо.

Answer 2

Получите теги li в вашем цикле, затем получите последний тд в каждом li. Я немного изменил ваш опубликованный код. Вы начали цикл с 1, что означает, что вы не получите первый элемент списка. Массивы проиндексированы 0, поэтому начинайте с 0. В списке вы использовали длину <=, которая включала бы несуществующий элемент в конце списка.

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

Обновление:

Вот немного более эффективный метод.

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

Answer 3

Сделай что-нибудь подобное.

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

Answer 4

Если вы использовали уникальные идентификаторы, вы можете получить их напрямую, не переходя в дерево HTML:

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