一个列表中有很多公共信息重复出现,看上去比较繁琐。在不不改动后台数据结构的情况下,改下一下前端代码把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} , 意思是合并第一列中的重复数据(但是列表中的数据初始化的时候一定要排序咯,当前只能合并行)
$("#my-table").rowspan({td:1});
demo下载地址:http://pan.baidu.com/share/link?shareid=363928&uk=2198392937
相关推荐
vue-easytable合并单元格,文档包括ftl文件及对应的js
layui table合并单元格.zip 跨行自动合并单元格
el-element中el-table合并单元格 合并列。无限制列合并。通过循环数据源数据获取该列需要合并的行数。
各种合并单元格的方法,本文提供了六种合并的方法,大家可以按需选择试用自己的方法!
对table表格进行操作,两行根据点击添加 删除按钮 进行单元格的删除 添加 合并单元格。
table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan 【table数据相同时合并单元格,原理:逐行进行比较,相同时隐藏第二行,对第一行添加rowspan】
主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下
日常开发中,经常遇到表格里需要自动合并单元格,考虑到写服务器控件比较消耗性能,因些还是把这种工作交给客户端Javascript去做吧,基于习惯用jquery框架,所以封装了一个Jquery插件。
使用bootstrap-table客户端分页生成表格,导出表格按照单元格内容相同合并单元格
本js脚本完美的实现了table单元格的合并,合并后犹如交叉表的形式,非常完美,并在其中附带例子可以验证。
一个简单的自动合并相同值单元格的例子,简单易懂
html直接看效果 只要输入table的id,就可以自动合并单元格,只要上下相邻的单元格相同的,都会合并
vue原始table实现合并单元格,插入button按钮,并且post服务以及实现了分页的功能
jasperReport 动态合并单元格示例
只要输入table的id,就可以自动合并单元格,只要上下相邻的单元格相同的,都会合并 html版比较好,点下面的 http://download.csdn.net/source/1276574
Word NPOI 合并单元格示例
JSP Table 单元格合并 javascript
el-table合并单元格计算
aspose.words 控件可以方便的出来word文档,通过在word模板中定义书签,可以在指定的位置插入内容,如果需要在word中插入表格,并且表格中含有多行行头,需要合并单元时,就稍微麻烦一些,必须要注意设置单元格的...
LayUiTable表单相同参数的单元格合并,可以几个列一起合并,注释相应完善。LayUiTable表单相同参数的单元格合并