知方号

知方号

js合并table单元格实例

js合并table单元格实例

这里展示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 ;                          }                     }                  });              });          }            

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

     

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。