html js 合并单元格合并单元格,js合并table单元格实例

这里展示js合并table的单元格，代码亲测可行

后台采用springmvc搭建

Record实体类public class Record {

public String isp;

public String large_area;

public String province;

public String name;

public String age;

......   //省略get和set方法

}

action方法@RequestMapping(value="/handlerList")

public ModelAndView handlerList(HttpServletRequest request,

HttpServletResponse response) throws Exception {

List list = new ArrayList();

Record record1 = new Record();

record1.setIsp("CUC");

record1.setLarge_area("广东");

record1.setProvince("深圳");

record1.setName("name1");

record1.setAge("age1");

Record record2 = new Record();

record2.setIsp("CUC");

record2.setLarge_area("广东");

record2.setProvince("广州");

record2.setName("name2");

record2.setAge("age2");

Record record3 = new Record();

record3.setIsp("NU");

record3.setLarge_area("江西");

record3.setProvince("宜春");

record3.setName("name3");

record3.setAge("age3");

Record record4 = new Record();

record4.setIsp("NU");

record4.setLarge_area("江西");

record4.setProvince("宜春");

record4.setName("name4");

record4.setAge("age4");

Record record5 = new Record();

record5.setIsp("NU");

record5.setLarge_area("江西");

record5.setProvince("赣州");

record5.setName("name5");

record5.setAge("age5");

Record record6 = new Record();

record6.setIsp("NU");

record6.setLarge_area("湖南");

record6.setProvince("郴州");

record6.setName("name6");

record6.setAge("age6");

list.add(record1);

list.add(record2);

list.add(record3);

list.add(record4);

list.add(record5);

list.add(record6);

Map map = new HashMap();

map.put("list", list);

return new ModelAndView("/showList",map);

}

jsp页面展示

pageEncoding="UTF-8"%>

html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Insert title here

运营商7天平均冗余带宽(G)今天冗余带宽(G)未来30天冗余带宽(G)目前已用带宽(G)

${item.isp }${item.large_area}${item.province}${item.name}${item.age}

可以看到未合并时效果如下：

jsp页面中添加相关的js片段后

$(document).ready(function () {

table_rowspan("#testTable", 1);

table_rowspan("#testTable", 2);

table_rowspan("#testTable", 3);

})

//函数说明：合并指定表格(表格id为table_id)指定列(列数为table_colnum)的相同文本的相邻单元格

//参数说明：table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="table1" ，此参数应为 #table1

//参数说明：table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。

function table_rowspan(table_id, table_colnum) {

table_firsttd = "";

table_currenttd = "";

table_SpanNum = 0;

colnum_Obj = $(table_id + " tr td:nth-child(" + table_colnum + ")");

colnum_Obj.each(function (i) {

if (i == 0) {

table_firsttd = $(this);

table_SpanNum = 1;

} else {

table_currenttd = $(this);

if (table_firsttd.text() == table_currenttd.text()) {

table_SpanNum++;

table_currenttd.hide(); //remove();

table_firsttd.attr("rowSpan", table_SpanNum);

} else {

table_firsttd = $(this);

table_SpanNum = 1;

}

}

});

}

//函数说明：合并指定表格(表格id为table_id)指定行(行数为table_rownum)的相同文本的相邻单元格

//参数说明：table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="table1" ，此参数应为 #table1

//参数说明：table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。

//          如果为数字，则从最左边第一行为1开始算起。

//          "even" 表示偶数行

//          "odd" 表示奇数行

//          "3n+1" 表示的行数为1、4、7、10.......

//参数说明：table_maxcolnum 为指定行中单元格对应的最大列数，列数大于这个数值的单元格将不进行比较合并。

//          此参数可以为空，为空则指定行的所有单元格要进行比较合并。

function table_colspan(table_id, table_rownum, table_maxcolnum) {

if (table_maxcolnum == void 0) {

table_maxcolnum = 0;

}

table_firsttd = "";

table_currenttd = "";

table_SpanNum = 0;

$(table_id + " tr:nth-child(" + table_rownum + ")").each(function (i) {

row_Obj = $(this).children();

row_Obj.each(function (i) {

if (i == 0) {

table_firsttd = $(this);

table_SpanNum = 1;

} else if ((table_maxcolnum > 0) && (i > table_maxcolnum)) {

return "";

} else {

table_currenttd = $(this);

if (table_firsttd.text() == table_currenttd.text()) {

table_SpanNum++;

table_currenttd.hide(); //remove();

table_firsttd.attr("colSpan", table_SpanNum);

} else {

table_firsttd = $(this);

table_SpanNum = 1;

}

}

});

});

}

效果如下，可以看到字段相同的列已经进行合并了：