一个合并表格单元格的jquery插件.提供"按行合并"与"按列合并"2个功能
使用方法:调用$.tableSpan.table_rowspan实现合并列的单元格 或 $.tableSpan.table_colspan实现合并行的单元格
一点修改: 某些情况下可能需要缩写某列,时候需要比较td的tile属性,所以增加是否需要比较title的参数
(function($){
/**
* desc : 合并指定表格(表格id为table_id)指定列(列数为table_colnum)的相同文本的相邻单元格
* @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data
* @table_colnum : 为需要合并单元格的所在列.参考jQuery中nth-child的参数.若为数字,从最左边第一列为1开始算起;"even" 表示偶数列;"odd" 表示奇数列; "3n+1" 表示的列数为1、4、7、......
* @table_minrow ? : 可选的,表示要合并列的行数最小的列,省略表示从第0行开始 (闭区间)
* @table_maxrow ? : 可选的,表示要合并列的行数最大的列,省略表示最大行列数为表格最后一行 (开区间)
*/
$.tableSpan = $.tableSpan || {};
$.extend($.tableSpan,{
table_rowspan : function table_rowspan(table_id,table_colnum){
if(table_colnum=="even"){
table_colnum = "2n";
}else if(table_colnum=="odd"){
table_colnum = "2n+1";
}else{
table_colnum = ""+table_colnum;
}
var cols=[];
var all_row_num = $(table_id+" tr td:nth-child(1)").length;
var all_col_num = $(table_id+" tr:nth-child(1)").children().length;
if(table_colnum.indexOf("n")==-1){
cols[0] = table_colnum;
}else{
var n = 0;
var a = table_colnum.substring(0,table_colnum.indexOf("n") );
var b= table_colnum.substring(table_colnum.indexOf("n")+1);
//alert("a="+a+"b="+(b==true));
a = a?parseInt(a):1;
b = b?parseInt(b):0;
//alert(b);
while(a*n+b<=all_col_num){
cols[n] = a*n+b;
n++;
}
}
var table_minrow = arguments[2]?arguments[2]:0;
var table_maxrow = arguments[3]?arguments[3]:all_row_num+1;
var table_firsttd = "";
var table_currenttd = "";
var table_SpanNum = 0;
for(var j=0;j<cols.length;j++){
$(table_id + " tr td:nth-child(" + cols[j] + ")").slice(table_minrow,table_maxrow).each(function(i){
var table_col_obj = $(this);
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;
}
}
});
}
},
/**
* desc : 合并指定表格(表格id为table_id)指定行(行数为table_rownum)的相同文本的相邻单元格
* @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data
* @table_rownum : 为需要合并单元格的所在行.参考jQuery中nth-child的参数.若为数字,从最左边第一列为1开始算起;"even" 表示偶数行;"odd" 表示奇数行; "3n+1" 表示的行数为1、4、7、......
* @table_mincolnum ? : 可选的,表示要合并行中的最小列,省略表示从第0列开始(闭区间)
* @table_maxcolnum ? : 可选的,表示要合并行中的最大列,省略表示表格的最大列数(开区间)
*/
table_colspan : function table_colspan(table_id,table_rownum){
//if(table_maxcolnum == void 0){table_maxcolnum=0;}
var table_mincolnum = arguments[2]?arguments[2]:0;
var table_maxcolnum;
var table_firsttd = "";
var table_currenttd = "";
var table_SpanNum = 0;
$(table_id + " tr:nth-child(" + table_rownum + ")").each(function(i){
table_row_obj = $(this).children();
table_maxcolnum = arguments[3]?arguments[3]:table_row_obj.length;
table_row_obj.slice(table_mincolnum,table_maxcolnum).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++;
if(table_currenttd.is(":visible")){
table_firsttd.width(parseInt(table_firsttd.width())+ parseInt(table_currenttd.width()));
}
table_currenttd.hide(); //remove();
table_firsttd.attr("colSpan",table_SpanNum);
}else{
table_firsttd = $(this);
table_SpanNum = 1;
}
}
});
});
}
});
})(jQuery);
分享到:
相关推荐
日常开发中,经常遇到表格里需要自动合并单元格,考虑到写服务器控件比较消耗性能,因些还是把这种工作交给客户端Javascript去做吧,基于习惯用jquery框架,所以封装了一个Jquery插件。
Excel表格功能jQuery插件是一款可以拖动列宽,行高,对齐方式,合并单元格,上方插入一行,下方插入一行,左边插入一列,右边插入一列,删除行,删除列,自定义宽行列等一系列excel功能。
自己编写的jquery插件,主要用于合并html table中内容相同的单元格内容,参照src/js/jquery.mergeTableCell.js
jquery.responsive-tables.js是一款轻量级的响应式jQuery表格插件。该响应式表格插件可以在小屏幕设备中将表格内容以列表的方式进行显示。并且它支持一个页面同时存在多个表格实例及合并单元格等。
jQuery简单仿Excel表格功能插件,按下鼠标左键不放,可范围选择多个单元格区块,鼠标右键进行操作,可以拖动列宽,行高,对齐方式,合并单元格,上方插入一行,下方插入一行,左边插入一列,右边插入一列,删除行,...
Flexigrid是一个类似于Ext Gird,...它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。这个例子对jquery初学者有一定的帮助
Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
这次分享一款基于jQuery的简易版Excel表格插件,它模拟了Excel的一些常用功能,包括数据的录入、选取、智能填充以及各式样式等功能,并且支持右键菜单,对于常用的数据操作已经完全能够胜任了。
Excel表格功能jQuery插件是一款可以拖动列宽,行高,对齐方式,合并单元格,上方插入一行,下方插入一行,左边插入一列,右边插入一列,删除行,删除列,自定义宽行列等一系列excel功能。
内容索引:脚本资源,jQuery,复选框,jQuery插件 jquery tableRow 表格与复选框配合插件,能够让表格行与复选框产生级联选择效果,具体请查看压缩包内的官方示例。
jquery表格单元格合并
原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ...
web前端开发的时候经常会遇到要做表单的页面...这里代码跟大家分享下,希望对大家有用,如下: 头部JQuery代码 代码如下: [removed] jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件 return this.eac
原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ...
芯片库Chipkoo(意思是粘性)是一个用于修复表头的 jquery 插件。 Chipkoo 不需要知道您桌子的总宽度。 将其附加到表格后,它会自动计算所需的所有内容并使标题具有粘性。 Chipkoo 在 MIT 许可下可用。麻省理工学院...
Flexigrid它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
《jQuery攻略》对使用jQuery过程中遇到的各类问题给出了解决方案,比如,如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果,以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展jQuery。...
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...