首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

代码语言:txt
复制
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",从而显示该行。

使用示例:

代码语言:txt
复制
<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
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的结果

领券