不积跬步,无以至千里;不积小流,无以成江海。

Dean's blog

  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

js合并单元格

如下的表格,按招标项目列,如果相同则进行合并:

HTML表格进行合并主要是设置rowspan参数,这个默认是一行的,如果设置大于1的值,就会跨多行。具体的做法如下:

1、标识哪些列需要合并:给需要合并的单元格式增加merge属性,不同的列使用不同的值,如下:

2、在表格加载完成后,执行如下代码:

function merges() {
    $("td[merge]")
        .parents("table")
        .each(function () {
            var mergeVals = {};
            $(this).find("td[merge]").each(function () {
                var mergeVal = $(this).attr("merge");
                var mergeTxt = $(this).text();

                if (mergeVals[mergeVal] == undefined) mergeVals[mergeVal] = [];
                if ($.inArray(mergeTxt, mergeVals[mergeVal]) > -1) return;
                mergeVals[mergeVal].push(mergeTxt);

                var merges = $("td[merge='" + mergeVal + "']:contains('" + mergeTxt + "')");
                merges.eq(0).attr("rowspan", merges.size());
                $("td[merge='" + mergeVal + "']:contains('" + mergeTxt + "'):gt(0)").remove();
            });
        });
}

 

最终效果如下:

注:

使用这个方法,需要先按需要合并的列进行排序。

不允许评论
粤ICP备17049187号-1