js对table的td进行相同内容合并示例详解

首先，我们假设你有一个如下的HTML表格：

<table id="myTable">
  <tr>
    <td>Apple</td>
    <td>Banana</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Banana</td>
    <td>Banana</td>
    <td>Banana</td>
  </tr>
</table>

接下来是JavaScript代码，用于遍历表格并合并相同内容的`

function mergeSameCells(tableId) {
    const table = document.getElementById(tableId);
    let lastValue = null;
    let cellSpan = 1;

    // 遍历每一行
    for (let row of table.rows) {
        let firstCell = null;

        // 遍历当前行的每一个单元格
        for (let cell of row.cells) {
            // 如果当前单元格不为空且内容与上一个单元格相同
            if (cell.textContent.trim() !== "" &&
                (lastValue === null || cell.textContent.trim() === lastValue)) {
                // 增加跨度
                cellSpan++;

                // 如果不是第一个单元格，则隐藏它
                if (firstCell !== null) {
                    cell.style.display = 'none';
                } else {
                    // 记录第一个单元格，用于设置colspan
                    firstCell = cell;
                }
            } else {
                // 如果内容与上一个单元格不同，则更新第一个单元格的colspan并重置跨度
                if (firstCell !== null) {
                    firstCell.colSpan = cellSpan;
                }
                firstCell = cell;
                cellSpan = 1;
                lastValue = cell.textContent.trim();
            }
        }

        // 处理每行最后一个单元格的colspan
        if (firstCell !== null) {
            firstCell.colSpan = cellSpan;
        }
    }
}

// 调用函数
mergeSameCells('myTable');

这段代码首先获取指定ID的表格，然后遍历表格的每一行和每一列。它检查每个单元格的内容，如果与上一个单元格相同，则增加`cellSpan`计数器并隐藏该单元格（通过将其`display`属性设置为`none`）。当遇到不同内容的单元格时，它会更新前一个单元格的`colSpan`属性以反映合并的单元格数量，并重置`cellSpan`和`lastValue`以继续处理下一组可能相同的单元格。

请注意，这个示例假设你想要合并的是水平相邻的单元格（即同一行内的单元格）。如果你想要合并垂直相邻的单元格（跨越多行），则逻辑会更复杂，并可能需要额外的数据结构来跟踪哪些单元格应该被合并。