如何在javascript中基于复选框选择显示表行

在JavaScript中，可以使用复选框来选择要显示的表行。下面是一个实现该功能的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>显示表行</title>
  <style>
    table {
      border-collapse: collapse;
    }

    table, th, td {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h2>表格</h2>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>25</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>35</td>
      </tr>
    </tbody>
  </table>

  <h2>选择要显示的行</h2>
  <input type="checkbox" id="row1" onclick="toggleRow(1)">
  <label for="row1">第一行</label><br>
  <input type="checkbox" id="row2" onclick="toggleRow(2)">
  <label for="row2">第二行</label><br>
  <input type="checkbox" id="row3" onclick="toggleRow(3)">
  <label for="row3">第三行</label><br>

  <script>
    function toggleRow(rowNumber) {
      var table = document.querySelector('table');
      var row = table.rows[rowNumber];

      if (row.style.display === 'none') {
        row.style.display = '';
      } else {
        row.style.display = 'none';
      }
    }
  </script>
</body>
</html>

在上面的示例中，我们首先创建了一个简单的表格，包含姓名和年龄两列。然后在页面上创建了三个复选框，用于选择要显示的行。每个复选框都有一个对应的id，并使用onclick事件调用toggleRow()函数来切换行的显示状态。

toggleRow()函数根据传入的行号参数获取表格中对应的行，并通过修改行的style.display属性来切换行的显示和隐藏。如果行的display属性为none，则将其改为默认值''，使其显示；如果行的display属性不是none，则将其改为none，使其隐藏。

这样，当用户勾选复选框时，相应的行将根据复选框的状态进行显示或隐藏。

注意：上述示例中只涉及前端实现，没有涉及后端、数据库等其他技术。具体的应用场景和推荐的腾讯云产品，可以根据实际需求进行选择和开发。