Question

我正在使用JavaScript代码段来显示响应式表格，通过属性在移动设备上设置标题。这是有效的，但是，如果我使用同一个类的第二个表，它在移动设备上会出错（请调整屏幕大小以查看此内容）; 。的标题。

我在这里做错了什么，如何解决这个问题？

这是HTML：

<table class="test">
                        <thead>
                            <tr>
                                <th>Bla</th>
                                <th>Bla</th>
                                <th>Bla</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Bla</td>
                                <td>Blabla</td>
                                <td>Blablabla</td>
                            </tr>
                        </tbody>                
                    </table>

<table class="test">
                            <thead>
                                <tr>
                                    <th>Not</th>
                                    <th>Not</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Twatwa</td>
                                    <td>Twatwa</td>
                                </tr>
                            </tbody>                
                        </table>

http://codepen.io/anon/pen/QbJqVv

编辑：在新答案之后，它确实在第二个表上显示表头，但不是正确的表头。它只是将第一个表的表头放入第二个表。

Answer 1

首先，您的HTML无效，因为您没有关闭任何元素（<tr><td></td></tr>等） - 但这是另一个问题。请练习好的HTML标准。

您在选择表格主体时没有使用querySelectorAll，因此您只需在找到的第一个属性中设置该属性。

这个经过修改的代码片段应该可以实现您的目标。

var headertext = [],
headers = document.querySelectorAll(".test th"),
tablerows = document.querySelectorAll(".test th"),
tablebody = document.querySelectorAll(".test tbody");

for(var i = 0; i < headers.length; i++) {
  var current = headers[i];
  headertext.push(current.textContent.replace(/\r?\n|\r/,""));
} 

for (var tb = 0; tb < tablebody.length; tb++) {
  for (var i = 0, row; row = tablebody[tb].rows[i]; i++) {
    for (var j = 0, col; col = row.cells[j]; j++) {
      col.setAttribute("data-th", headertext[j]);
    } 
  }
}

Answer 2

正如我在评论中所写，你需要分别处理每个表。对于.querySelectorAll('.test th')，只需提供所有th个元素，无论它们属于哪个表格。

以下是一个如何做到这一点的简单示例。

// for each .test
[].forEach.call(document.querySelectorAll('.test'), function (table) {
  // get header contents
  var headers = [].map.call(table.querySelectorAll('th'), function (header) {
    return header.textContent.replace(/\r?\n|\r/, '');
  });

  // for each row in tbody
  [].forEach.call(table.querySelectorAll('tbody tr'), function (row) {
    // for each cell
    [].forEach.call(row.cells, function (cell, headerIndex) {
      // apply the attribute
      cell.setAttribute('data-th', headers[headerIndex]);
    });
  });
});

演示：http://codepen.io/anon/pen/NqEXqe

第二个表的表头与queryAllSelector不正确

2 个答案: