hide-使用纯javascript显示具有给定类名的表行

答案： 在前端开发中，有时候我们需要根据特定的类名来显示或隐藏表格中的行。下面是一种使用纯 JavaScript 实现的方法：

function showRowsByClassName(className) {
  var rows = document.getElementsByTagName("tr");
  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    if (row.classList.contains(className)) {
      row.style.display = "table-row";
    }
  }
}

上述代码中，我们定义了一个名为 showRowsByClassName 的函数，它接受一个参数 className，表示要显示的行所具有的类名。函数首先通过 getElementsByTagName 方法获取到所有的表格行，然后使用循环遍历每一行。对于每一行，我们使用 classList.contains 方法检查是否包含指定的类名，如果包含，则将该行的 display 样式属性设置为 "table-row"，从而显示该行。

使用示例：

<button onclick="showRowsByClassName('hidden-row')">显示隐藏行</button>

<table>
  <tr class="hidden-row">
    <td>隐藏行1</td>
  </tr>
  <tr>
    <td>显示行1</td>
  </tr>
  <tr class="hidden-row">
    <td>隐藏行2</td>
  </tr>
  <tr>
    <td>显示行2</td>
  </tr>
</table>

在上述示例中，我们创建了一个按钮，并通过 onclick 事件绑定了 showRowsByClassName 函数，参数为 "hidden-row"，即要显示的行所具有的类名。当点击按钮时，具有类名为 "hidden-row" 的行将会显示出来。

推荐的腾讯云相关产品和产品介绍链接地址：

• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb_mysql
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse