Question

我使用以下代码将数据属性添加到表格单元格中，但仅限于页面上的单个表格。如何修改以将数据属性添加到页面上的所有现有表？

提前谢谢

    var headertext = [],
headers = document.querySelectorAll("#product-table th"),
tablerows = document.querySelectorAll("#product-table th"),
tablebody = document.querySelector("#product-table tbody");

for(var i = 0; i < headers.length; i++) {
  var current = headers[i];
  headertext.push(current.textContent.replace(/\r?\n|\r/,""));
} 
for (var i = 0, row; row = tablebody.rows[i]; i++) {
  for (var j = 0, col; col = row.cells[j]; j++) {
    col.setAttribute("data-th", headertext[j]);
  } 
}

Answer 1

问题是您拨打的是querySelector()而不是querySelectorAll()。

进行调整会给你一个tbody的集合（而不仅仅是第一个），这也意味着你的循环逻辑需要调整。

详情请见下文。

var headertext = [],
    headers = document.querySelectorAll("#product-table th"),
    tablerows = document.querySelectorAll("#product-table tr"),
    //*** querySelectorAll() instead of querySelector() ***
    tablebody = document.querySelectorAll("#product-table tbody");

//...

//*** add this loop to iterate through each found tablebody element ***
for(var k = 0, tb; tb = tablebody[k]; k++)
    for (var i = 0, row; row = tb.rows[i]; i++) {
      for (var j = 0, col; col = row.cells[j]; j++) {
        col.setAttribute("data-th", headertext[j]);
      } 
    }

Javascript将数据属性创建到表格单元格中

1 个答案: