使用jQuery操作table如何实现单元格合并

使用jQuery操作table如何实现单元格合并

比较表格的内容。判断是否合并单元:

    var tr = $(".tab-3  tr").length;// 获取当前表格中tr的个数
    var mark = 0; //要合并的单元格数
    var index = 0; //起始行数
    /*   
    * 要合并单元格，需要存储两个参数，   
    * 1，开始合并的单元格的第一行的行数，    
    * 2.要合并的单元格的个数   
    **/  
    //判断 若只有一行数据，则不做调整
    if (tr <= 2) {
    } else {
        //var i=1 比较当前的tr和上一个tr的值
        for (var i = 0; i < tr ; i++) {
            var ford = $(".tab-3  tr:gt(0):eq(" + i + ") td:eq(0)").text();
            //根据下标获取单元格的值
            // tr:gt(0) 从下标0 开始获取
            // tr:gt(0):eq( i ) :i 标识 当前行的下标 ，0 开始
            // td:eq(1) 当前行的第二个单元格，下标从0开始
            var behind = $(".tab-3  tr:gt(0):eq(" + (parseInt(i) + 1) + ") td:eq(1)").text();
            if (ford == behind) {
                $(".tab-3  tr:gt(0):eq(" + (parseInt(i) + 1) + ") td:eq(1)").hide();
                mark = mark + 1;
            } else if (ford != behind) {
                //如果值不匹配则遍历到不同种的分类,将旧分类隐藏
                index = i - mark;
                $(".tab-3  tr:gt(0):eq(" + index + ") td:eq(1)").attr("rowspan", mark + 1);//+1 操作标识，将当前的行加入到隐藏
                //rowspan 列上横跨， colspan 行上横跨
                //后面的参数，表示横跨的单元格个数，
                //合并单元格就是将其他的单元格隐藏（hide）,或删除（remove）。
                //将一个单元格的rowspan 或colsspan 加大
                mark = 0;
                $(".tab-3  tr:gt(0):eq(" + (parseInt(i)) + ") td:eq(1)").hide();
            }
        }
    }

最终结果:

我也是百度到的.总结一下,下次可能会用到.