Question

我正在尝试在javascript中遍历html表并更新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

您可以使用li在下面的示例中选择该单元格中的所有querySelectorAll。另外，如果没有将li包含在ul或ol中，则无法使用有效的HTML。

小提琴：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/

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

正如评论中提到的，你不需要所有这些循环。如果您只想从表中获取所有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);
}

Answer 2

您可以考虑使用类似这样的jQuery

M[T]

Answer 3

AtheistP3ace已经发布了一个很好的答案，但我是新来的，想尝试回答自己，所以这里有一个小提琴，不确定它是不是你想要的，我在你的标签中看到了jquery：{ {3}}

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

JavaScript迭代单元子元素

3 个答案: