table合并单元格（Jquery 插件）

最新推荐文章于 2021-06-21 18:56:23 发布

Jlins

最新推荐文章于 2021-06-21 18:56:23 发布

阅读量9.2k

点赞数

一个列表中有很多公共信息重复出现，看上去比较繁琐。在不不改动后台数据结构的情况下，改下一下前端代码把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 代码：

!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} , 意思是合并第一列中的重复数据（但是列表中的数据初始化的时候一定要排序咯，当前只能合并行）