这里展示js合并table的单元格,代码亲测可行
后台采用springmvc搭建
Record实体类
1 2 3 4 5 6 7 8 public class Record { public String isp; public String large_area; public String province; public String name; public String age; ...... //省略get和set方法 }action方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 @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页面展示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 Insert title here 运营商 7 天平均冗余带宽(G) 今天冗余带宽(G) 未来 30 天冗余带宽(G) 目前已用带宽(G) ${item.isp } ${item.large_area} ${item.province} ${item.name} ${item.age}
可以看到未合并时效果如下:
jsp页面中添加相关的js片段后
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 $(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 ; } } }); }); }效果如下,可以看到字段相同的列已经进行合并了: