如何用Jquery或Javascript在每10个</td>后添加</tr><tr>

场景1：处理HTML字符串（未插入DOM） #

如果先拿到PHP生成的HTML文本、还没渲染到页面，可直接对字符串做处理：

// 假设htmlStr是PHP生成的表格字符串
let htmlStr = `<TABLE BORDER="1" WIDTH="100%" CLASS="Numbers">
<TR>
    <TD>img1</TD>
    <TD>img2</TD>
    <TD>img3</TD>
    <TD>img4</TD>
    <TD>img5</TD>
    <TD>img6</TD>
    <TD>img7</TD>
    <TD>img8</TD>
    <TD>img9</TD>
    <TD>img10</TD>
    <TD>img11</TD>
    <TD>img12</TD>
    <TD>img13</TD>
    <TD>img14</TD>
    <TD>img15</TD>
    <TD>img16</TD>
    <TD>img17</TD>
    <TD>img18</TD>
    <TD>img19</TD>
    <TD>img20</TD>
    <TD>img21</TD>
    <TD>img22</TD>
    <TD>img23</TD>
    <TD>img24</TD>
    <TD>img25</TD>
    <TD>img26</TD>
</TR>
</TABLE>`;

// 每10个</TD>后插入</TR><TR>
const processedHtml = htmlStr.replace(/(<\/TD>\s*){10}/g, '$&</TR>\n    <TR>\n        ');

// 移除拆分后可能出现的空行
const finalHtml = processedHtml.replace(/<TR>\s*<\/TR>/g, '');

// 将处理后的内容插入页面
document.body.innerHTML = finalHtml;

场景2：操作已渲染的DOM元素 #

如果表格已经显示在页面上，直接操作DOM节点更可靠：

jQuery版本 #

$(document).ready(function() {
    const $table = $('.Numbers');
    const $tds = $table.find('TD');
    const rowSize = 10;
    
    // 从第10个TD开始，每10个为一组移到新行
    for (let i = rowSize; i < $tds.length; i += rowSize) {
        $('<TR>').insertAfter($tds.eq(i-1).parent()).append($tds.slice(i, i + rowSize));
    }
});

原生JavaScript版本 #

document.addEventListener('DOMContentLoaded', function() {
    const table = document.querySelector('.Numbers');
    const tds = Array.from(table.querySelectorAll('TD'));
    const rowSize = 10;
    
    let currentRow = table.querySelector('TR');
    for (let i = rowSize; i < tds.length; i += rowSize) {
        const newRow = document.createElement('TR');
        // 将当前组的TD添加到新行
        newRow.append(...tds.slice(i, i + rowSize));
        // 把新行插入到当前行后面
        currentRow.after(newRow);
        currentRow = newRow;
    }
});

注意事项 #

• 两种方案都按每10个<TD>拆分一行
• DOM操作方式更适配已渲染的页面，能避免字符串正则匹配可能出现的异常
• 示例默认原表格只有一个初始<TR>，如果原表格有多行，需调整逻辑

内容的提问来源于stack exchange，提问作者smallbee