可通过 document.queryselectorall('tr') 获取所有表格行节点,返回 nodelist,支持现代遍历;限定 table 内可用 'table tr';getelementsbytagname('tr') 兼容旧浏览器,返回动态 htmlcollection。

可以通过 document.querySelectorAll 或 getElementsByTagName 获取当前页面中所有表格行(<tr>)节点。
<h3>使用 querySelectorAll 获取所有 tr 元素</h3>
<p>这是最常用、最灵活的方式,能精确选择所有 <code><tr>,包括嵌套在任意 <code><table> 中的行:
<font color="gray">
<pre class="brush:php;toolbar:false;">const allTrs = document.querySelectorAll('tr');</pre>
</font>
<p>返回的是一个 <code>NodeList(类数组),可直接遍历:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 支持
forEach、for...of等现代遍历方式 - 若需转换为真数组,可用
Array.from(allTrs)或[...allTrs] - 注意:它也会选中
<thead>、<code><tbody>、<code><tfoot> 和无明确父容器的孤立 <code><tr>(虽不规范但可能存在于 DOM 中) <h3>限定在 table 内部获取更严谨的 tr</h3> <p>如果只想获取真正属于表格结构的行(排除意外散落的 <code><tr>),可加上祖先限制: <font color="gray"> <pre class="brush:php;toolbar:false;">const trsInTables = document.querySelectorAll('table tr');</pre> </font> <ul><li>只匹配嵌套在 <code><table> 元素内的 <code><tr><li>自动跳过未包裹在 <code><table> 中的 <code><tr>(如某些模板引擎或误写产生的无效结构) <li>仍包含 <code><thead>/</thead> <tbody>/</tbody> <tfoot> 下的行,符合语义预期 <h3>用 getElementsByTagName 获取(兼容性更强)</h3> <p>适用于需要支持极老浏览器(如 IE8)的场景:</p> <font color="gray"> <pre class="brush:php;toolbar:false;">const trs = document.getElementsByTagName('tr');</pre> </font> <ul> <li>返回的是动态的 <code>HTMLCollection,DOM 变化会实时反映在该集合中 - 性能略优于
querySelectorAll(尤其在大型文档中),但通常差异可忽略 - 若需遍历,建议先转成数组:
Array.from(trs),否则直接用for (let i = 0; i
补充:排除表头/表尾行(按需过滤)
如果只需要 <tbody> 中的普通数据行,可进一步筛选:
<font color="gray">
<pre class="brush:php;toolbar:false;">const bodyRows = Array.from(document.querySelectorAll('tbody tr'));</pre>
</font>
<ul>
<li>
<code>tbody tr 不匹配 thead 或 tfoot 下的行
<tbody>,浏览器会自动补全,所以该选择器依然有效
<li>也可结合 <code>:not() 排除:document.querySelectorAll('tr:not(thead tr):not(tfoot tr)')
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










