javascript - JS-从DOM访问<table>(错误:“TypeError:tablex [0]未定义”)

我想将<th>标头添加到没有<table>但位于具有已知"id"的<div>中的"id"中，因此我遍历DOM来查找它：

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

并且当tablex[0].length;运行时，它会引发“ TypeError：tablex [0]未定义”。

我猜var tablex是分配c[i];的错误方法。

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

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

最佳答案

首先，您不需要像这样遍历。使用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();

关于javascript - JS-从DOM访问<table>(错误:“TypeError:tablex [0]未定义”)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57347281/