表格单元格合并

表格单元格合并

html

 <div class="cut_aside">
            <table class="table table-striped" id="testTable"></table>
 </div>

js

 function tableData1() {
        let list = [
            { 'name': '阿里巴巴', organization: '山水', num: '1', number: '21', sum: '22'},
            { 'name': '华为', organization: '山水', num: '2', number: '22', sum: '22'},
            { 'name': '阿里巴巴', organization: '天承', num: '3', number: '12', sum: '22'},
            { 'name': '阿里巴巴', organization: '山水1', num: '4', number: '13', sum: '22'},
            { 'name': '华为', organization: '山水1', num: '5', number: '11', sum: '22'},
            { 'name': '华为', organization: '山水2', num: '6', number: '14', sum: '22'},
            { 'name': '阿里巴巴', organization: '山水3', num: '7', number: '16', sum: '22'},
        ];
        /**
         * 排序操作开始
         */
        let dt = list;
        if(dt == ""){
          var tbl = document.getElementById('testTable');
        tbl.innerHTML ="暂无数据";
        }else{
        let sortColumn = ['name', 'sum']; //需要排序合并的列，排序顺序即数组字段先后顺序。
        /*
         *递归比较函数（用于比较多字段顺序）
         *参数：
         *	a、b 是list.sort()方法默认会传递进来的比较字段。
         *	c: 需要排序的字段，默认从第一个sortColumn元素开始进行排序
         *	i: 递归临界判断字段，默认为0
         */
        let compare = function (a, b, c = sortColumn[0], i = 0) {
            if (a[c] == b[c]){ //等于的话进行判断是否还有后续字段需要排序，没有则返回0；有则递归进行后续字段排序处理。
                if(i == (sortColumn.length-1)){//没有后续字段
                    i = 0;
                    return 0;
                }
                i+=1;
                return compare(a, b, sortColumn[i], i);//递归排序后续字段
            } else if (a[c] > b[c]) { //大于返回1
                return 1;
            } else { //小于返回-1
                return -1;
            }
        };
        dt.sort(compare); //对数据进行排序

        /**
         * 排序操作结束
         */

        /**
         * 合并操作开始
         */
        let mergeColumns = []; //存放合并行内容的数组
        for(let i=0; i<sortColumn.length; i++){
            mergeColumns.push({
                rspan:1, //合并的行数
                colStr:'', //合并行的内容
                colName:sortColumn[i] //行key
            });
        }

        /*
         * 列合并函数（递归实现,这里只处理了需要合并排序的列）
         * 参数：
         *	curItem: 当前条数据
         *	preItem：前一条数据
         *	curIndex: 用于定义当前执行到第几个合并字段
         */
        let dataMerge = function(curItem, preItem, curIndex = 0){
            if (curItem[mergeColumns[curIndex].colName] == preItem[mergeColumns[curIndex].colName]) {//值相同说明该字段这两行数据内容相同，可以合并，所以rspan加1
                mergeColumns[curIndex].colStr = '';
                mergeColumns[curIndex].rspan += 1;
                if(curIndex == (mergeColumns.length-1)){//做一个限制，否则会无线递归下去
                    return;
                }
                curIndex += 1;
                dataMerge(curItem, preItem, curIndex);//递归调用
            } else { //值不同，则需要进行列td输出。
                for(let j=curIndex; j<sortColumn.length; j++){//从curIndex进行内容处理，防止遗漏或过多处理
                    mergeColumns[j].colStr = ('<td  rowspan="' + mergeColumns[j].rspan + '">' + curItem[mergeColumns[j].colName] + '</td>');
                    mergeColumns[j].rspan = 1;
                }
                curIndex = 0;
            }
        }

        /*
         * 倒序循环，一次取当前条和下一条，进行比较，
         * 根据比较结果累加合并的行数或重置合并的行数，生成的标签依次往前累加
         * 为什么要倒叙处理呢？因为td的rowspan属性是在第一条编写的哦
         */
        let ht = ''; //输出的行内容（数据都是倒叙拼接）
        for (let i = dt.length - 1; i > 0; i--) {
            let curItem = dt[i], preItem = dt[i - 1]; //获取当前条和前一条
            dataMerge(curItem, preItem, 0);//合并数据
            ht = '<tr>' + mergeColumns[0].colStr + '<td>' + curItem.organization + '</td><td>' + curItem.num + '</td><td>' + curItem.number + '</td>' + mergeColumns[1].colStr + '</tr>' + ht;
        }

        let firstItem = dt[0];// 由于循环没有到第一条，所以必须单独补上第一条
        ht = '<tr><td name="col_1" rowspan="' + mergeColumns[0].rspan + '">' + firstItem.name + '</td><td>' + firstItem.organization + '</td>'
            + '<td>' + firstItem.num + '</td><td>' + firstItem.number + '</td><td name="col_2" rowspan="' + mergeColumns[1].rspan + '">' + firstItem.sum + '</td></tr>' + ht;

        //表头处理
        ht = '<thead><tr><th>体检单位</th><th>体检机构</th><th>导入次数(次)</th><th>导入成功数量(人)</th><th>导入成功数量总计(人)</th></tr></thead><tbody>' + ht + '</tbody>';

        var tbl = document.getElementById('testTable');
        tbl.innerHTML = ht;
}
        /**
         * 合并操作结束
         */
    }
    tableData1();

原文链接

表格合并与颜色处理