使用Javascript访问列表项中的表单元格数据

Accessing table cell data within list items with Javascript

本文关键字：表单 单元格 数据 Javascript 访问 列表 使用      更新时间：2023-09-26

我正在动态创建一个列表，我需要能够从表单元格中检索值。结构为：

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

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，你就可以直接获得它。

检索循环中的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);
}

如果您使用了唯一的ID，您可以直接获取它们，而无需进入HTML树：

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

这样做。

<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;
  }
}
相关文章：