JS 实现双色表格实现代码

JS实现双色表格是一个常见的前端应用场景，本文将详细讲解如何使用JavaScript实现双色表格，并提供两个示例说明。

准备工作

在开始编写JS代码之前，需要准备一个HTML表格结构以供JS代码渲染；同时也需要一个CSS样式表来为表格添加样式。

以下是一个表格样例HTML代码:

<table id="mytable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

同时，需要为表格样式创建CSS样式，如下所示：

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

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #4CAF50;
  color: white;
}

实现过程

1. 使用CSS实现

可以使用CSS中的偶数选择器 :nth-child(even) 和奇数选择器 :nth-child(odd) 来为表格的偶数行和奇数行添加不同的样式，以达到双色表格的效果。

以下是一个使用CSS实现双色表格的样例代码：

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

2. 使用JS实现

使用JavaScript动态生成样式规则，以达到为表格的偶数行和奇数行添加不同的样式的效果。

以下是一个使用JavaScript实现双色表格的样例代码：

const table = document.getElementById("mytable");
const rows = table.getElementsByTagName("tr");
for (let i = 0; i < rows.length; i++) {
  if (i % 2 == 0) {
    rows[i].style.backgroundColor = "#f2f2f2";
  }
}

示例说明

示例一：大规模数据渲染

在大规模数据的表格渲染中，为了提高数据渲染的效率，一般会使用JavaScript实现双色表格，以方便用户浏览和阅读。在这种情况下，使用CSS实现会降低表格渲染的效率，因此，JavaScript实现方式会更好一些。

以下是一个渲染大规模数据的表格的示例代码：

const data = [
  { name: '张三', age: 20, gender: '男' },
  { name: '李四', age: 25, gender: '女' },
  { name: '王五', age: 30, gender: '男' },
  // 更多数据...
];
const table = document.getElementById("mytable");
const tbody = table.querySelector("tbody");
for (let i = 0; i < data.length; i++) {
  const row = document.createElement("tr");
  const cell1 = document.createElement("td");
  const cell2 = document.createElement("td");
  const cell3 = document.createElement("td");
  cell1.innerText = data[i].name;
  cell2.innerText = data[i].age;
  cell3.innerText = data[i].gender;
  row.appendChild(cell1);
  row.appendChild(cell2);
  row.appendChild(cell3);
  tbody.appendChild(row);
}

在上述示例代码中，首先使用JavaScript动态生成表格的HTML代码，然后再使用JavaScript为偶数行设置背景色，最后将完整的表格渲染到页面中。

示例二：动态交互表格

在页面动态交互和数据操作方面，使用JavaScript实现双色表格会更加方便和灵活。在这种情况下，使用JavaScript实现方式会比CSS实现更好一些。

以下是一个动态的交互式表格示例代码:

<table id="mytable">
  <thead>
    <tr>
      <th>名称</th>
      <th>描述</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>商品 1</td>
      <td>商品 1 的描述信息</td>
      <td>100 元</td>
      <td><input type="number" name="count" value="1"></td>
    </tr>
    <tr>
      <td>商品 2</td>
      <td>商品 2 的描述信息</td>
      <td>200 元</td>
      <td><input type="number" name="count" value="1"></td>
    </tr>
    <tr>
      <td>商品 3</td>
      <td>商品 3 的描述信息</td>
      <td>300 元</td>
      <td><input type="number" name="count" value="1"></td>
    </tr>
  </tbody>
</table>

在上述示例代码中，除了普通的表格结构外，还使用了表单元素来实现动态输入数量。这时候，如果使用JavaScript实现双色表格，可以在数量发生改变时修改表格内容，以便用户更加清晰地浏览和阅读。

以下是一个动态交互表格的JavaScript示例代码：

const table = document.getElementById("mytable");
const rows = table.getElementsByTagName("tr");
for (let i = 0; i < rows.length; i++) {
  if (i % 2 == 0) {
    rows[i].style.backgroundColor = "#f2f2f2";
  }
  rows[i].querySelector('input[name="count"]').addEventListener('change', function(e) {
    const price = parseFloat(rows[i].querySelectorAll('td')[2].innerText);
    const count = parseInt(e.currentTarget.value);
    rows[i].querySelectorAll('td')[3].innerText = price * count + ' 元';
  });
}

在上述示例代码中，除了为偶数行设置背景色外，还为数量的输入框添加了 change 事件侦听，并根据输入数量改变商品价格小计。这样可以大大提升用户交互体验，增加表单的实用性。同时也说明使用JavaScript实现双色表格在动态交互方面的优势。