JS实现表格响应式布局技巧

JS实现表格响应式布局技巧可以通过以下步骤来实现：

步骤一：设置表格的HTML结构

首先，需要在HTML文件中创建表格结构。一般来说，表格需要一个表头，以及一个或多个表格行。如下所示：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>32</td>
      <td>[e-mail]</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>28</td>
      <td>[e-mail]</td>
    </tr>
    <!-- 在更多的 <tr> 中添加更多的数据 -->
  </tbody>
</table>

步骤二：设置CSS样式

接下来需要设置表格的CSS样式，以便在不同设备上显示正确的布局。这里我们需要为表格设置一些响应式CSS样式。

table {
  width: 100%;
  border-collapse: collapse;
}
thead {
  color: white;
  background-color: #333;
}
th,
td {
  padding: 10px;
  text-align: left;
}
th {
  font-weight: bold;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
@media only screen and (max-width: 600px) {
  th,
  td {
    display: block;
    width: 100%;
  }
  th {
    text-align: center;
  }
}

在这里，我们使用了@media查询，当设备宽度小于600像素时，将表头和表格元素转换为块级元素，并设置其宽度为100%。此外，还通过媒体查询设置表格标题居中。

步骤三：使用JavaScript调整表格内容和样式

最后一步是使用 JavaScript 脚本动态调整表格内容和样式。一种方法是在客户端执行 JavaScript，另一种方法是使用服务器端的脚本。下面是一个示例 JavaScript 实现它的方式：

const table = document.querySelector('table');

// 在窗口大小改变时更新表格响应式布局
window.addEventListener('resize', () => {
  if (window.innerWidth < 600) {
    // 逐个隐藏表格的列
    table.querySelectorAll('tr').forEach((row) => {
      row.querySelectorAll('td, th').forEach((cell, index) => {
        if (index === 0) {
          cell.style.display = 'block';
          cell.style.fontSize = '20px';
          cell.style.fontWeight = 'bold';
          cell.style.marginBottom = '10px';
        } else {
          cell.style.display = 'none';
        }
      });
    });
  } else {
    // 显示表格的全部列
    table.querySelectorAll('tr').forEach((row) => {
      row.querySelectorAll('td, th').forEach((cell) => {
        cell.style.display = '';
      });
    });
  }
});

在这个 JavaScript实现中，我们使用window对象的resize事件来监听客户端的窗口大小更改。我们检查窗口的宽度是否小于600像素，如果是，则使用CSS隐藏可选列，并将表头中的第一个td元素设置为块级元素，以便在小屏幕上单独显示。

这个实现可以让你的表格在不同的设备上都以最佳的方式呈现。在下面的示例中，当窗口宽度变为600像素以下时，表格将在每行中只显示姓名，且姓名居中对齐。

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>32</td>
      <td>[e-mail]</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>28</td>
      <td>[e-mail]</td>
    </tr>
    <!-- 添加更多的 <tr> 来增加数据行 -->
  </tbody>
</table>

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #333;
  color: white;
}

th,
td {
  padding: 10px;
  text-align: left;
}

th {
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

@media only screen and (max-width: 600px) {
  /* 隐藏表格里除了第一个td之外的 */
  td:not(:first-child),
  th:not(:first-child) {
    display: none;
  }
  /* 将第一个td设置为块级元素，居中对齐 */
  td:first-child,
  th:first-child {
    font-size: 20px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
    text-align: center;
  }
}

const table = document.querySelector('table');

window.addEventListener('resize', () => {
  const isMobileView = window.innerWidth < 600;

  table.querySelectorAll('tr').forEach((row) => {
    row.querySelectorAll('th,td').forEach((cell, index) => {
      if (isMobileView) {
        if (index < 1) {
          // 显示只在移动端显示的第一个
          cell.style.display = 'block';
        } else {
          cell.style.display = 'none';
        }
      } else {
        cell.style.display = ''; //取消display:none属性
      }
    });
  });
});