讲师中心 微信公众号
AI工具推荐 视频效率加速

如何使用 JavaScript 动态隐藏当前所在的表格行(tr)

雨芳同学_7312

雨芳同学_7312

发布时间:2026-02-02 16:02:05

|

999人浏览过

|

来源于php中文网

原创

如何使用 JavaScript 动态隐藏当前所在的表格行(tr)

在无法修改 html 结构的前提下,可通过 `document.currentscript` 获取当前执行的 script 元素,再用 `closest('tr')` 向上查找最近的父级 `

`,最后设置 `hidden = true` 实现精准隐藏目标行。

在实际前端开发中,常会遇到 HTML 由后端或第三方库自动生成、无法添加 class/id 等标识符的场景。此时若需对特定 <tr> 行进行动态控制(如隐藏敏感字段行),传统通过 ID 或 class 选择器的方式便不可行。所幸现代浏览器提供了 document.currentScript 这一可靠 API,它始终指向当前正在执行的 <script> 元素本身,配合 DOM 遍历方法,即可实现“脚本定位自身宿主行”的精准操作。

核心实现代码如下:

<td>Fred
  <script type="text/javascript">
    var myscript = document.currentScript;
    var myrow = myscript.closest('tr');
    if (myrow) {
      myrow.hidden = true; // 推荐:语义清晰、无需 CSS 支持、自动跳过渲染
      // 或使用 myrow.style.display = 'none';(兼容性更广,但需注意 display 值覆盖)
    }
  </script>
</td>

✅ 为什么 closest('tr') 是最优解?

java后端编程
java后端编程

专用于 Java Spring Boot 后端开发的专业技能。当用户提出以下需求时,应调用此技能:构建 REST API、创建 Spring Boot 项目、编写 Java 后端服务、配置数据库访问(JPA / MyBatis)、处理认证与授权(Spring Security / JWT)、实现微服务架构(Spring Cloud)、排查 Spring Boot 相关错误、审查 Java 代码质量,或执行任何与 Spring Boot / Java 后端相关的任务。

下载
  • closest() 从当前元素开始向上遍历祖先节点,返回第一个匹配选择器的元素(含自身),天然适配嵌套结构;
  • 相比 parentNode.parentNode 等硬编码层级路径,它不依赖 DOM 深度,健壮性强;
  • <script> 标签始终位于 <td> 内,而 <td> 的直接父级即为 <tr>,因此 closest('tr') 可靠且高效。

⚠️ 注意事项:

立即学习“Java免费学习笔记(深入)”;

  • document.currentScript 在所有主流浏览器(Chrome 29+、Firefox 4+, Edge 13+, Safari 15.4+)中均受支持,但不支持 IE;若需兼容 IE,可改用 Array.from(document.scripts).pop()(需确保 script 是页面最后一个)或事件委托方案,但复杂度显著上升;
  • element.hidden = true 是标准 DOM 属性,等效于 style.display = 'none',但优势在于:① 不干扰原有 CSS display 值;② 语义明确(表示“逻辑隐藏”);③ 支持 hidden 属性的响应式行为(如屏幕阅读器自动忽略);
  • 若后续需恢复显示,只需 myrow.hidden = false 即可,无需手动管理 display 值。

? 进阶建议:
如需批量控制(例如隐藏所有含 Password 的行),可在页面加载完成后统一遍历 <th> 文本并调用隐藏逻辑,但本例中因限制仅能在 <td> 内插入脚本,故推荐单点注入方式——简洁、可控、无副作用。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

相关专题

更多
chrome什么意思
chrome什么意思

chrome是浏览器的意思,由Google开发的网络浏览器,它在2008年首次发布,并迅速成为全球最受欢迎的浏览器之一。本专题为大家提供chrome相关的文章、下载、课程内容,供大家免费下载体验。

2746

2023.08.11

chrome无法加载插件怎么办
chrome无法加载插件怎么办

chrome无法加载插件可以通过检查插件是否已正确安装、禁用和启用插件、清除插件缓存、更新浏览器和插件、检查网络连接和尝试在隐身模式下加载插件方法解决。更多关于chrome相关问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

5379

2023.11.06

Chrome开启无痕模式
Chrome开启无痕模式

本专题整合了Chrome无痕模式开启相关内容,阅读专题下面的文章了解更多详细教程。

3847

2026.03.24

edge是什么浏览器
edge是什么浏览器

Edge是一款由Microsoft开发的网页浏览器,是Windows 10操作系统中默认的浏览器,其目标是提供更快、更安全、更现代化的浏览器体验。本专题为大家提供edge浏览器相关的文章、下载、课程内容,供大家免费下载体验。

2962

2023.08.21

IE浏览器自动跳转EDGE如何恢复
IE浏览器自动跳转EDGE如何恢复

ie浏览器自动跳转edge的解决办法:1、更改默认浏览器设置;2、阻止edge浏览器的自动跳转;3、更改超链接的默认打开方式;4、禁用“快速网页查看器”;5、卸载edge浏览器;6、检查第三方插件或应用程序等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2674

2024.03.05

如何解决Edge打开但没有标题的问题
如何解决Edge打开但没有标题的问题

若 Microsoft Edge 浏览器打开后无标题(窗口空白或标题栏缺失),可尝试以下方法解决: 重启 Edge:关闭所有窗口,重新启动浏览器。 重置窗口布局:右击任务栏 Edge 图标 → 选择「最大化」或「还原」。 禁用扩展:进入 edge://extensions 临时关闭插件测试。 重置浏览器设置:前往 edge://settings/reset 恢复默认配置。 更新或重装 Edge:检查最新版本,或通过控制面板修复

3072

2025.04.24

mysql标识符无效错误怎么解决
mysql标识符无效错误怎么解决

mysql标识符无效错误的解决办法:1、检查标识符是否被其他表或数据库使用;2、检查标识符是否包含特殊字符;3、使用引号包裹标识符;4、使用反引号包裹标识符;5、检查MySQL的配置文件等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

14860

2023.12.04

Python标识符有哪些
Python标识符有哪些

Python标识符有变量标识符、函数标识符、类标识符、模块标识符、下划线开头的标识符、双下划线开头、双下划线结尾的标识符、整型标识符、浮点型标识符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1123

2024.02.23

Playwright 测试失败怎么办
Playwright 测试失败怎么办

Playwright测试失败专题汇集超时、定位器匹配、浏览器提前关闭、依赖与插件配置、文件上传、SSL及Docker启动等故障文章,并介绍通过截图、报告和Trace定位错误。

0

2026.10.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 1.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 6万人学习

CSS教程
CSS教程

共754课时 | 98.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn