Javascript 使用queryAllSelector时，第二个表的表头不正确

我正在使用一个JavaScript片段来显示一个响应表，通过属性在mobile上设置标题。这是可行的，但是，如果我在同一个类中使用第二个表，它在移动设备上会出错（请调整屏幕大小以查看此信息）；的标题

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

这是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>

布拉
布拉
布拉
布拉
布拉布拉
喋喋不休
不
不
特瓦
特瓦

---

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

首先，HTML是无效的，因为您没有关闭任何元素（

等）-但这是另一个问题。请实践好的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]);
    } 
  }
}

var headertext=[]，
headers=document.querySelectorAll（“.test th”），
tablerows=document.queryselectoral（“.test th”），
tablebody=document.queryselectoral（“.test-tbody”）；
对于（变量i=0；i

正如我在评论中所写，您需要分别处理每个表。对于

。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]);
    });
  });
});

---

演示：

一些结束标记如何？问一个明显的问题：为什么你要使用

querySelector

而不是

queryselectoral

来处理

tablebody

当每个表都有自己的

tbody

时，现在@Simba已经解决了这个问题。现在的问题是，它在第二个表中设置了错误的表头。您必须分别记录和处理每个表。当前，您选择的所有标题都与它们所属的表无关。@Yoshi:但这不意味着我必须为所有表指定一个不同的类吗？我希望它尽可能通用。我该怎么做？所以，如果有人在这个类中放置一个表，我希望它能够工作，不管添加了多少个表。。。我也试过同样的方法。。把它弄脏编辑：不，它不起作用。。。嗯，不是应该的样子。如果您现在将两个表放在同一个类中，但有不同的表头，它将不会显示正确的表头。因此，假设第一个表上有2个表头，第二个表上有3个表头，它没有在mobile上正确显示正确的头。检查这个：是的，太棒了。谢谢Yoshi！