使用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 id在每個列表項中是唯一的，但顯然在整個列表中是唯一的。

我的問題是我似乎無法獲得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;
    }
}

但是，當然，在td標簽上具有唯一的ID即可直截了當。

Answer 2

如果您使用唯一的ID，則可以直接獲得它們，而無需深入HTML樹：

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

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

檢索循環中的li標簽，然后獲取每個li中的最后一個td。 我修改了您發布的代碼。 您從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);
}