如何合并表格中值相同的单元格？附示例代码

首先看一下你的原始表格结构：

<html>
 <table>
 <thead>
 <tr>
 <th>NO </th>
 <th> name </th>
 <th> 2018-1-1 </th>
 <th> 2018-1-2 </th>
 <th> 2018-1-3 </th>
 <th> 2018-1-4 </th>
 <th> 2018-1-5 </th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td> 1 </td>
 <td> Mark Tony </td>
 <td>Available </td>
 <td>Available </td>
 <td>Available </td>
 <td>Not </td>
 <td>Not </td>
 </tr>
 <tr>
 <td> 2 </td>
 <td> Susan Tom </td>
 <td>Not </td>
 <td>Available </td>
 <td>Available </td>
 <td>Not </td>
 <td>Not </td>
 </tr>
 </tbody>
 </table>
 </html>

我来给你两种可行的实现方案，分别是纯JavaScript和jQuery版本，专门处理每行内连续相同值的单元格横向合并：

纯JavaScript 实现 #

这个版本不需要依赖任何第三方库，直接用原生JS就能完成：

window.onload = function() {
    // 获取表格的tbody区域
    const tbody = document.querySelector('table tbody');
    // 遍历每一行数据
    const rows = tbody.querySelectorAll('tr');
    
    rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        // 前两列是序号和姓名，不需要合并，直接跳过短行
        if (cells.length <= 2) return;
        
        // 从第三列开始跟踪当前值和连续数量
        let currentValue = cells[2].textContent.trim();
        let currentSpan = 1;
        
        // 从第四列开始遍历到最后一列
        for (let i = 3; i < cells.length; i++) {
            const cellValue = cells[i].textContent.trim();
            
            if (cellValue === currentValue) {
                // 值相同，增加连续跨度，隐藏当前单元格
                currentSpan++;
                cells[i].style.display = 'none';
            } else {
                // 值不同，给之前的连续单元格设置colspan
                cells[i - currentSpan].setAttribute('colspan', currentSpan);
                // 更新当前跟踪的值和跨度
                currentValue = cellValue;
                currentSpan = 1;
            }
        }
        // 处理最后一组连续的单元格
        cells[cells.length - currentSpan].setAttribute('colspan', currentSpan);
    });
};

jQuery 实现 #

如果你的项目已经引入了jQuery，这个版本会更简洁直观：

$(document).ready(function() {
    $('table tbody tr').each(function() {
        const $cells = $(this).find('td');
        if ($cells.length <= 2) return;
        
        let currentValue = $cells.eq(2).text().trim();
        let currentSpan = 1;
        
        // 从第四列开始遍历
        $cells.slice(3).each(function(index) {
            const cellValue = $(this).text().trim();
            
            if (cellValue === currentValue) {
                currentSpan++;
                $(this).hide();
            } else {
                // 定位到连续单元格的起始位置，设置colspan
                $cells.eq(2 + index - currentSpan + 1).attr('colspan', currentSpan);
                currentValue = cellValue;
                currentSpan = 1;
            }
        });
        // 处理最后一组连续单元格
        $cells.eq($cells.length - currentSpan).attr('colspan', currentSpan);
    });
});

注意事项 #

• 这里只处理了横向的连续相同值合并，也就是每行内的日期列。如果之后需要纵向合并（比如不同行同一日期列有相同值），可以用类似思路：遍历每一列，检查上下行单元格值是否相同，调整rowspan属性即可。
• 代码里用了trim()是为了去除文本前后的空格，避免因为空格导致值不匹配的问题。
• 隐藏单元格用了display: none，配合colspan设置不会破坏表格布局，表格会自动调整列宽。

你只需要把这段代码放在HTML文件的<script>标签里，或者引入的JS文件中，页面加载完成后就会自动执行合并操作啦。

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