通过单击标题选择 HTML 表格列

紫微前端

于 2022-06-24 15:57:44 发布

阅读量309

点赞数

分类专栏：前端知识加深文章标签： html 前端 javascript

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125447275

版权

前端知识加深专栏收录该内容

510 篇文章 ¥39.90 ¥99.00

订阅专栏

本文介绍如何利用JavaScript实现HTML表格的功能，让用户通过单击表头来选择特定列，增强用户交互体验。详细讲解了相关JavaScript代码实现及应用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

document.querySelectorAll('th').forEach($th => 
  $th.onclick = event => {
    document.querySelectorAll(`td:nth-of-type(${event.currentTarget
      .cellIndex + 1})`)
    .forEach($td => $td.classList.toggle('selected'))
 })