JavaScript 遍历单元格子元素

Question

我正在尝试遍历 javascript 中的 html table 并更新 td 标记中列表项的 ID。我目前无法访问这些元素。我需要访问的标签是；

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

我当前的 JavaScript 低于它让我进入牢房。谁能告诉我如何访问 li 的 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++) {

  }
}

Answer 1

您可以 select 在下面示例中使用 querySelectorAll 的单元格中的所有 li。如果不将 li 包装在 ul 或 ol.

中，则 HTML 也是无效的

Fiddle: 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，因此尽最大努力得到完整解释。

Fiddle: http://jsfiddle.net/AtheistP3ace/ukgfekey/1/

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).find('li');
    for (var index = 0; index < li.length; index++) {
            alert($(li[index]).attr('id') + ': ' + $(li[index]).text());
    }
  }
}

并且如评论中所述，您不需要所有这些循环。如果您只想要 table 中的所有 li，您可以这样做：

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

Answer 2

您可能会考虑使用 jQuery 这样的东西

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

Answer 3

AtheistP3ace 已经 post 一个很好的答案，但我是新来的，想尝试回答自己所以这里是 fiddle 我做的，不确定它是否是你想要的，我用过jquery 正如我在您的标签中看到的那样：JSFiddle

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

JavaScript 遍历单元格子元素

JavaScript Iterate through cell child elements

html

javascript

iteration

jquery