使用JQuery取消HTML表格合并行并填充对应关联值

我来帮你搞定这个需求，用jQuery可以轻松实现移除表格的合并行，并为每个空单元格填充对应的关联值。下面是具体的实现思路和完整代码：

实现思路 #

核心逻辑是遍历所有带有rowspan属性的单元格，将它们的内容复制到被合并的行对应的列中，然后移除rowspan属性，让表格每行的列数保持一致。

完整代码示例 #

首先是你的表格样式和结构，加上jQuery处理代码：

table, td{ border:1px solid grey; margin:2em }
td { padding: 1em; border-collapse: collapse; }

<table>
<tbody>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
<tr>
<td rowspan="2">John</td>
<td>green</td>
<td>apples</td>
<td rowspan="2">February</td>
<td>cow</td>
</tr>
<tr>
<td>red</td>
<td>oranges</td>
<td>lion</td>
</tr>
<tr>
<td rowspan="2">Mary</td>
<td>blue</td>
<td rowspan="2">meat</td>
<td rowspan="2">May</td>
<td>dog</td>
</tr>
<tr>
<td>white</td>
<td>cat</td>
</tr>
</tbody>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 遍历所有包含rowspan属性的单元格
    $('td[rowspan]').each(function() {
        const $cell = $(this);
        const rowCount = parseInt($cell.attr('rowspan'), 10);
        const colIndex = $cell.index();
        const cellContent = $cell.html();

        // 为当前单元格下方的rowCount-1行填充对应内容
        $cell.parent().nextAll().slice(0, rowCount - 1).each(function() {
            // 在对应列的位置插入新的td，内容与原单元格一致
            $(this).find('td').eq(colIndex).before(`<td>${cellContent}</td>`);
        });

        // 移除原单元格的rowspan属性
        $cell.removeAttr('rowspan');
    });
});
</script>

代码解释 #

1. DOM就绪执行：$(document).ready()确保在页面DOM完全加载后再运行处理代码，避免找不到元素的问题。
2. 遍历合并单元格：$('td[rowspan]').each()选中所有带合并行属性的单元格，逐个处理。
3. 获取关键信息：拿到合并的行数、单元格所在的列索引，以及单元格的内容。
4. 填充内容到下方行：通过nextAll().slice(0, rowCount - 1)选中需要填充的行，在对应列的位置插入带有原内容的新单元格。
5. 移除合并属性：最后去掉原单元格的rowspan，让表格每行都有完整的列。

运行这段代码后，你的表格就会变成每行都有完整列，且空单元格都填充了对应的关联值，和你期望的效果一致。

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