[置顶] table表格合并第一列中相同的内容!
2017-09-06 11:06
856 查看
分享一个简单实用的jquery小插件:
合并前:
合并后:(根据实际项目需求,只合并第一列)
实际项目截图:
亲测可用!
比起第一种,第二种方法比较复杂,而且会把tabel里面所有相同列都合并,不实用。而且要改成仅合并第一列的话也不太好实现。但是思路可以学习一下。
方法一
(仅用20行代码就可实现该功能,而且封装在jq库里面,其他页面可以直接调用)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table id="table1"> <tr> <td>111</td> <td>222</td> <td>333</td> </tr> <tr> <td>111</td> <td>555</td> <td>333</td> </tr> <tr> <td>111</td> <td>888</td> <td>333</td> </tr> <tr> <td>aaa</td> <td>bbb</td> <td>333</td> </tr> </table> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script> jQuery.fn.rowspan = function(colIdx) { //封装的一个J ceed Query小插件 return this.each(function(){ var that; $('tr', this).each(function(row) { $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) { if (that!=null && $(this).html() == $(that).html()) { rowspan = $(that).attr("rowSpan"); if (rowspan == undefined) { $(that).attr("rowSpan",1); rowspan = $(that).attr("rowSpan"); } rowspan = Number(rowspan)+1; $(that).attr("rowSpan",rowspan); $(this).hide(); } else { that = this; } }); }); }); } $(function() { $("#table1").rowspan(0);//传入的参数是对应的列数从0开始 第一列合并相同 // $("#table1").rowspan(1);//传入的参数是对应的列数从0开始 第二列合并相同 }); </script> </script> </html>
合并前:
合并后:(根据实际项目需求,只合并第一列)
实际项目截图:
方法二
另见网上其他方法:(原生js来实现)function hb(){ var tab = document.getElementById("subtable"); var maxCol = 3, val, count, start; var ys=""; for(var col = maxCol-1; col >= 0 ; col--) { count = 1; val = ""; for(var i=0; i<tab.rows.length; i++){ if(val == tab.rows[i].cells[col].innerHTML){ count++; }else{ if(count > 1){ //合并 start = i - count; if(ys=="#00FFFF"){ ys="#EEEE00"; }else{ ys="#00FFFF"; } tab.rows[start].cells[col].rowSpan = count; tab.rows[start].cells[1].style.backgroundColor=ys;//改变颜色 // ys="#EEEE00"; // tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改变颜色绿色 for(var j=start+1; j<i; j++){ // tab.rows[j].cells[col].style.display = "none"; tab.rows[j].removeChild(tab.rows[j].cells[col]); } count = 1; } val = tab.rows[i].cells[col].innerHTML; } } if(count > 1 ){ //合并,最后几行相同的情况下 start = i - count; tab.rows[start].cells[col].rowSpan = count; for(var j=start+1; j<i; j++) { tab.rows[j].removeChild(tab.rows[j].cells[col]); } } } }
亲测可用!
总结
:第一种方法,仅用20行代码就可实现该功能,而且封装在jq库里面,其他页面可以直接调用。也就是说,其他页面只需一行代码就可实现该功能。即$("#table1").rowspan(0);
比起第一种,第二种方法比较复杂,而且会把tabel里面所有相同列都合并,不实用。而且要改成仅合并第一列的话也不太好实现。但是思路可以学习一下。
相关文章推荐
- table表格合并第一列中相同的内容!
- 依据第一列,内容相同的,最后一列的表格合并
- 合并表格中同一列中相同的内容
- Javascript合并表格中具有相同内容单元格示例
- 根据第一列条件合并表格中后面相同的列
- Javascript合并表格相同内容单元格示例
- [JS&Jquery]实现页面表格中相同内容的行或列合并
- Javascript合并表格中具有相同内容的单元格
- Javascript合并表格中具有相同内容单元格示例
- java实现任意带table表格的html页面,生成与表格相同内容的excel文件
- Jquery 合并表格单元内容相同的单元
- Table中合并相同内容列+Excel中合并相同内容列。
- 前台页面table表格相同数据列合并
- 使用jQuery实现页面表格中相同内容的行或列合并
- table表格合并跨行中相同元素的列
- 一个JAVASCRIPT实用函数,完成合并表格中列中具有相同内容的列单元格的功能
- js对table的td进行相同内容合并示例详解
- js 对table的td进行相同内容合并
- 使用jQuery实现页面表格中相同内容的行或列合并[转载]
- Javascript合并表格中具有相同内容单元格示例