Question

我想将<th>头添加到没有<table>但位于已知已知"id"的{{1}}中的<div>中，所以我遍历DOM来找到它：

"id"

运行// search <table> var c = document.getElementById("tablediv").children; var i; for(i = 0; i < c.length; i++) { Output("- " + c[i].nodeName + "<br>"); // show progress if(c[i].nodeName == "TABLE") break; } var tablex = c[i]; // that's the right object var columns = tablex[0].length; // "TypeError: tablex[0] is undefined" var row = tablex.insertRow(-1); for(var i = 0; i < columns; i++) { var headerCell = document.createElement("TH"); headerCell.innerHTML = tablex[1][i]; row.appendChild(headerCell); }时，它会引发 “ TypeError：tablex [0]未定义”。 。

我想tablex[0].length;是分配var tablex的错误方法。

您能告诉我正确的做法吗？

注意：表的第一行TD包含列标题，因此我们将这一行转换为TH或获取标题并在插入TH行后删除TD行。

Answer 1

首先，您不需要像这样遍历。直接使用querySelector('#tablediv table')查询表更容易。注意，使用了querySelector而不是querySelectorAll，这将返回具有请求ID的节点内的第一个表。因此，最终代码如下所示：

var table = document.querySelector('#tablediv table');
// Here you can add check if the table was found (not null) - I'll leave that to you
var firstRow = table.querySelector('tr');
var columns = firstRow.querySelectorAll('td'); // Or th if you have a header cells
console.log(`Number of columns: ${columns.length}`);

var headerRow = document.createElement('tr');
firstRow.parentNode.insertBefore(headerRow, firstRow);


for(var i = 0; i < columns.length; i++) {
  var headerCell = document.createElement("TH");
  headerCell.innerHTML = columns[i].innerHTML;
  headerRow.appendChild(headerCell);
}
firstRow.remove();

Answer 2

考虑到tablex最好是HTMLTableElement的事实，tablex[0]未定义。

Answer 3

似乎是因为您在foor循环中定义了“ i”，所以您无法从循环外部做出反应。这就是为什么会出现错误。

JS-从DOM访问<table>（错误：“ TypeError：tablex [0]未定义”）

3 个答案: