解决JS脚本仅对首个table-mobile类表格添加label属性的问题

我找到一个脚本，能给每个<td>添加label属性，通过CSS伪选择器重排列表头实现表格移动端适配。我希望脚本作用于所有带table-mobile类的表格，但复制同类别表格后，仅第一个表格生效，第二个无label属性。我不是JavaScript开发者，已适配类名但多表格场景失效，相关代码如下：

原HTML代码 #

<table class="table-mobile">
  <thead>
    <tr>
      <th>Account</th>
      <th>Due Date</th>
      <th>Amount</th>
      <th>Period</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Visa - 3412</td>
      <td>04/01/2016</td>
      <td>$1,190</td>
      <td>03/01/2016 - 03/31/2016</td>
    </tr>
    <tr>
      <td>Visa - 6076</td>
      <td>03/01/2016</td>
      <td>$2,443</td>
      <td>02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td>Corporate AMEX</td>
      <td>03/01/2016</td>
      <td>$1,181</td>
      <td>02/01/2016 - 02/29/2016</td>
    </tr>
    <tr>
      <td>Visa - 3412</td>
      <td>02/01/2016</td>
      <td>$842</td>
      <td>01/01/2016 - 01/31/2016</td>
    </tr>
  </tbody>
</table>
<table class="table-mobile">
<thead>
  <tr>
    <th>Account</th>
    <th>Due Date</th>
    <th>Amount</th>
    <th>Period</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Visa - 3412</td>
    <td>04/01/2016</td>
    <td>$1,190</td>
    <td>03/01/2016 - 03/31/2016</td>
  </tr>
  <tr>
    <td>Visa - 6076</td>
    <td>03/01/2016</td>
    <td>$2,443</td>
    <td>02/01/2016 - 02/29/2016</td>
  </tr>
  <tr>
    <td>Corporate AMEX</td>
    <td>03/01/2016</td>
    <td>$1,181</td>
    <td>02/01/2016 - 02/29/2016</td>
  </tr>
  <tr>
    <td>Visa - 3412</td>
    <td>02/01/2016</td>
    <td>$842</td>
    <td>01/01/2016 - 01/31/2016</td>
  </tr>
</tbody>
</table>
<script>setMobileTable('.table-mobile')</script>

原JavaScript代码 #

window.setMobileTable = function(selector) {
  // if (window.innerWidth > 600) return false;
  const tableEl = document.querySelector('.table-mobile');
  const thEls = tableEl.querySelectorAll('thead th');
  const tdLabels = Array.from(thEls).map(el => el.innerText);
  tableEl.querySelectorAll('tbody tr').forEach( tr => {
    Array.from(tr.children).forEach( 
      (td, ndx) =>  td.setAttribute('label', tdLabels[ndx])
    );
  });
}

问题原因 #

原代码中document.querySelector('.table-mobile')只会返回匹配选择器的第一个元素，后续表格完全没被遍历处理，因此只有第一个表格的<td>能添加上label属性。

修复后的JavaScript代码 #

window.setMobileTable = function(selector) {
  // if (window.innerWidth > 600) return false;
  // 获取所有匹配选择器的表格
  const tableEls = document.querySelectorAll(selector);
  // 遍历每个表格单独处理
  tableEls.forEach(tableEl => {
    const thEls = tableEl.querySelectorAll('thead th');
    const tdLabels = Array.from(thEls).map(el => el.innerText);
    tableEl.querySelectorAll('tbody tr').forEach(tr => {
      Array.from(tr.children).forEach((td, ndx) => {
        td.setAttribute('label', tdLabels[ndx]);
      });
    });
  });
}

修改说明 #

• 将document.querySelector替换为document.querySelectorAll(selector)，获取所有带table-mobile类的表格
• 新增tableEls.forEach循环，对每个表格单独执行原有的表头标签生成和单元格属性添加逻辑
• 保留原有的单表格处理逻辑，确保每个表格都能基于自身的表头生成对应的label值

内容的提问来源于stack exchange，提问作者jottin