table合并单元格(Jquery 插件)

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               

一个列表中有很多公共信息重复出现,看上去比较繁琐。在不不改动后台数据结构的情况下,改下一下前端代码把table 中的重复项合并单元格。

 
 
 
 

实现代码参考如下:

 

首先要导入:

 
  
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
 

 

HTML代码:

 
  
<table id="my-table"> <thead> <tr> <th>姓名</th> <th>学科</th> <th>学分</th> </tr> </thead> <tbody> <tr> <td>小铭</td> <td>数学</td> <td>100</td> </tr> <tr> <td>小铭</td> <td>英语</td> <td>100</td> </tr> <tr> <td>小铭</td> <td>化学</td> <td>100</td> </tr> <tr> <td>小铭</td> <td>美术</td> <td>100</td> </tr> <tr> <td>小红</td> <td>数学</td> <td>100</td> </tr> <tr> <td>小红</td> <td>英语</td> <td>100</td> </tr> <tr> <td>小红</td> <td>化学</td> <td>100</td> </tr> <tr> <td>小红</td> <td>美术</td> <td>100</td> </tr> </tbody></table>
 
 

 

script 代码:

扫描二维码关注公众号,回复: 4102614 查看本文章
 
  
!function($){ $.fn.rowspan=function(options)var defaults = {} var options = $.extend(defaults, options); this.each(function () var tds=$(this).find("tbody td:nth-child("+options.td+")"); var current_td=tds.eq(0); var k=1; tds.each(function(index, element) if($(this).text()==current_td.text()&&index!=0){ k++; $(this).remove(); current_td.attr("rowspan",k); current_td.css("vertical-align","middle"); }else{ current_td=$(this); k=1; } }); }) }}( window.jQuery );
 
 

 

用的话就很方便了:使用rowspan 方法就行,参数:{td:1} , 意思是合并第一列中的重复数据(但是列表中的数据初始化的时候一定要排序咯,当前只能合并行)

 
  
$("#my-table").rowspan({td:1});
 
 

 

demo下载地址:http://pan.baidu.com/share/link?shareid=363928&uk=2198392937

 

原文:http://www.guoxiaoming.com/?p=12


<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

这里写图片描述

猜你喜欢

转载自blog.csdn.net/ugfdfgg/article/details/84076761