本文介绍如何利用原生 JavaScript（无需 jQuery）自动识别表格中所有 元素，并从第 11 个起，每 10 个 创建一个新 并将其移入，从而实现响应式表格行分割。
本文介绍如何利用原生 javascript（无需 jquery）自动识别表格中所有 `
在实际开发中，有时后端（如 PHP）会一次性生成大量
✅ 核心逻辑说明
- 首先选取文档中所有
元素，跳过前 10 个（即保留在首行）； - 获取这些
的最近祖先 （通过 parentNode.parentNode 向上定位，兼容无 的简单表格）；
- 循环处理剩余
：每次取 10 个，创建新 ，并用 append(...cells) 批量插入； - 浏览器自动修正嵌套关系，确保最终 HTML 符合规范（如
只能直接位于 或 内）。
? 完整可运行代码
// 获取除前10个外的所有<td> const cells = [...document.querySelectorAll('td')].slice(10); // 定位目标table（自动适配无tbody结构） const table = cells.length > 0 ? cells[0].closest('table') : null; if (table && cells.length > 0) { while (cells.length) { const newRow = document.createElement('tr'); newRow.append(...cells.splice(0, 10)); table.appendChild(newRow); } } else { console.warn('未找到足够</td><td>元素或<table>容器，跳过处理'); }<h3>⚠️ 注意事项</h3> <ul><li> <strong>HTML 必须有效</strong>：确保原始 <td> 确实位于 <table> 内（即使缺失 <tbody>，closest('table') 也能准确定位）；<li> <strong>避免重复执行</strong>：该脚本应仅在 DOM 加载完成后运行一次（推荐放在 DOMContentLoaded 事件中）；</li> <li> <strong>样式兼容性</strong>：若原 <tr> 有内联样式或 class（如 class="header-row"），新生成的 </tr> <tr> 默认无样式，需按需添加；<li> <strong>不推荐操作 innerHTML</strong>：直接字符串替换 </li> </tr> <tr><td> 易引发 XSS 风险且无法保证 DOM 正确性，本方案基于真实节点操作，更健壮。<h3>✅ 最终效果示例（处理前后对比）</h3> <p><strong>原始错误结构（单行超长）：</strong></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7672" title="java-enterprise"><img src="https://img.php.cn/upload/skill/000/000/081/179161929545163.jpg" alt="java-enterprise" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill7672" title="java-enterprise" class="overflowclass">java-enterprise</a> <p class="overflowclass">Java企业开发专家，专注于Spring Boot、微服务架构和JVM优化。适用于：Java语言掌握、</p> </div> <a rel="nofollow" href="/xiazai/skill7672" title="java-enterprise" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;">img1 img2 ...img26 修复后标准结构（每行 10 列）：
img1 img2 ...img10 img11 img12 ...img20 img21 img22 ...img26 此方法轻量、零依赖、语义清晰，适用于 CMS 输出、日志表格、批量数据展示等场景，是修复服务端“懒渲染”表格的最佳实践之一。
- 获取这些
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
