jQuery实现HTML表格单元格的合并功能


Posted in Javascript onApril 06, 2016

本文实例讲述了jQuery实现HTML表格单元格合并的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

合并前:

jQuery实现HTML表格单元格的合并功能

合并后:

jQuery实现HTML表格单元格的合并功能

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* 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 ? : 可选的,表示要合并列的行数最大的列,省略表示最大行列数为表格最后一行 (开区间) 
*/
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 (table_col_obj.html() != " ") {
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 ? : 可选的,表示要合并行中的最大列,省略表示表格的最大列数(开区间) 
*/
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;
}
}
});
});
}
</script>
</head>
<body>
<table width="400" border="1" id="table1">
<tr>
<td align="center">
a
</td>
<td>
for
</td>
<td>
for
</td>
<td>
100
</td>
<td>
200
</td>
<td>
200
</td>
</tr>
<tr>
<td>
a
</td>
<td>
for
</td>
<td>
for
</td>
<td>
150
</td>
<td>
230
</td>
<td>
200
</td>
</tr>
<tr>
<td>
dd
</td>
<td>
if
</td>
<td>
for
</td>
<td>
100
</td>
<td>
200
</td>
<td>
200
</td>
</tr>
<tr>
<td>
aa
</td>
<td>
if
</td>
<td>
for
</td>
<td>
300
</td>
<td>
240
</td>
<td>
200
</td>
</tr>
<tr>
<td>
e
</td>
<td>
if
</td>
<td>
for
</td>
<td>
320
</td>
<td>
230
</td>
<td>
200
</td>
</tr>
</table>
<input type="button" value="合并表格2" onClick="table_colspan('#table1',1)"> 
<input type="button" value="合并表格1" onClick="table_rowspan('#table1',1)"> 
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQuery 动态扩展对象之另类视角
May 25 Javascript
JavaScript全局函数使用简单说明
Mar 11 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
JS实现秒杀倒计时特效
Jan 02 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
JS中JSON对象和String之间的互转及处理技巧
Apr 06 #Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 #Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 #Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 #Javascript
javascript中apply、call和bind的使用区别
Apr 05 #Javascript
JavaScript数组去重的两种方法推荐
Apr 05 #Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 #Javascript
You might like
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
IE bug table元素的innerHTML
2010/01/11 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
原生js实现旋转木马轮播图效果
2017/02/27 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
python进阶之自定义可迭代的类
2019/08/20 Python
python随机数分布random均匀分布实例
2019/11/27 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
电子工程求职信
2014/07/17 职场文书
高三复习计划
2015/01/19 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技