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

Question

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

提前致谢

    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 将数据属性创建到 table 个单元格中

Javascript to create data attributes into table cells

javascript

custom-data-attribute