这里展示js合并table的单元格，代码亲测可行
后台采用springmvc搭建
Record实体类publicclassRecord{
publicStringisp;
publicStringlarge_area;
publicStringprovince;
publicStringname;
publicStringage;
......//省略get和set方法
}
action方法@RequestMapping(value="/handlerList")
publicModelAndViewhandlerList(HttpServletRequestrequest,
HttpServletResponseresponse)throwsException{
Listlist=newArrayList();
Recordrecord1=newRecord();
record1.setIsp("CUC");
record1.setLarge_area("广东");
record1.setProvince("深圳");
record1.setName("name1");
record1.setAge("age1");
Recordrecord2=newRecord();
record2.setIsp("CUC");
record2.setLarge_area("广东");
record2.setProvince("广州");
record2.setName("name2");
record2.setAge("age2");
Recordrecord3=newRecord();
record3.setIsp("NU");
record3.setLarge_area("江西");
record3.setProvince("宜春");
record3.setName("name3");
record3.setAge("age3");
Recordrecord4=newRecord();
record4.setIsp("NU");
record4.setLarge_area("江西");
record4.setProvince("宜春");
record4.setName("name4");
record4.setAge("age4");
Recordrecord5=newRecord();
record5.setIsp("NU");
record5.setLarge_area("江西");
record5.setProvince("赣州");
record5.setName("name5");
record5.setAge("age5");
Recordrecord6=newRecord();
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);
Mapmap=newHashMap();
map.put("list",list);
returnnewModelAndView("/showList",map);
}
jsp页面展示
pageEncoding="UTF-8"%>
htmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">
Inserttitlehere
运营商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开始算起。
functiontable_rowspan(table_id,table_colnum){
table_firsttd="";
table_currenttd="";
table_SpanNum=0;
colnum_Obj=$(table_id+"trtd: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为指定行中单元格对应的最大列数，列数大于这个数值的单元格将不进行比较合并。
//此参数可以为空，为空则指定行的所有单元格要进行比较合并。
functiontable_colspan(table_id,table_rownum,table_maxcolnum){
if(table_maxcolnum==void0){
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;
}elseif((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;
}
}
});
});
}
效果如下，可以看到字段相同的列已经进行合并了：
