JavaScript迭代通过单元格子元素

我正在尝试遍历javascript中的html表格，并更新td标签中列表项的id。我目前在访问这些元素时遇到了麻烦。我需要访问的标签是;JavaScript迭代通过单元格子元素

<td> 
    <li id='1'>Curly</li> 
    <br /> 
    <li id='2'>Larry</li> 
    <br /> 
    <li id='3'>Moe</li> 
</td>

我目前的JavaScript是低于哪个让我到单元格。任何人都可以建议如何访问李的ID吗？

var table = document.getElementById("tbl_calendar"); 

for (var i = 0, row; row = table.rows[i]; i++) { 
    for (var j = 0, col; col = row.cells[j]; j++) { 

    } 
}

来源

2015-12-02 Jasper

好奇你为什么有一个jQuery标签，但你没有在问题中使用它。 – 2015-12-02 16:52:25

您可以在下面使用querySelectorAll的例子选择此小区内的所有li秒。此外，它的无效HTML无li s没有包装在ul或ol。

小提琴：http://jsfiddle.net/AtheistP3ace/ukgfekey/

JS：

var table = document.getElementById("tbl_calendar"); 

for (var i = 0, row; row = table.rows[i]; i++) { 
    for (var j = 0, col; col = row.cells[j]; j++) { 
    var li = col.querySelectorAll('li'); 
    for (var index = 0; index < li.length; index++) { 
     alert(li[index].id + ': ' + li[index].textContent); 
    } 
    } 
}

HTML：

<table id="tbl_calendar"> 
    <tr> 
    <td> 
     <ul> 
     <li id='1'>Curly</li> 
     <br /> 
     <li id='2'>Larry</li> 
     <br /> 
     <li id='3'>Moe</li> 
     </ul> 
    </td> 
    </tr> 
</table>

您还标记的jQuery所以在尽最大努力做到充分解释。

小提琴：http://jsfiddle.net/AtheistP3ace/ukgfekey/1/

变种表=的document.getElementById（ “tbl_calendar”）;

for (var i = 0, row; row = table.rows[i]; i++) { 
    for (var j = 0, col; col = row.cells[j]; j++) { 
    var li = $(col).find('li'); 
    for (var index = 0; index < li.length; index++) { 
      alert($(li[index]).attr('id') + ': ' + $(li[index]).text()); 
    } 
    } 
}

而且正如评论中所提到的那样，您不需要所有这些循环。如果你只是想从一个表中的所有li是你可以这样做：

小提琴：http://jsfiddle.net/AtheistP3ace/ukgfekey/2/

var table = document.getElementById("tbl_calendar"); 

var li, lis = table.querySelectorAll('tr td li'); 
for (var index = 0; index < lis.length; index++) { 
    li = lis[index]; 
    alert(li.id + ': ' + li.textContent); 
}

来源

2015-12-02 16:37:27 AtheistP3ace

我的头脑里混杂着各种标记。删除我的答案和+1给你。如果使用'.querySelectorAll（）'，您可能想要显示OP如何在单循环中使用'.table.querySelectorAll（“tr> td> li”）'。 – 2015-12-02 16:42:50

谢谢！用你的建议更新答案。 =] – AtheistP3ace

你可以考虑使用jQuery像这样

$(document).ready(function(){ 
     $("td > li").each(function() { 
      $(this).attr("id","foo"); 
     }); 
    });

来源

2015-12-02 16:51:45 Raider

AtheistP3ace已经发布一个很好的答案但我在这里是新来的，想试着回答我自己，所以这里是我做的一个小提琴，不知道它是你想要的，我用jquery，因为我在你的标签中看到它：JSFiddle

$("td").each(function() { 
    $(this).find('li').each(function() { 
     console.log($(this).attr("id")); 
    }); 
});

来源

2015-12-02 17:03:43

JavaScript迭代通过单元格子元素

回答

相关问题