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 相关文章推荐
一个用js实现的页内搜索代码
May 23 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
nginx部署多个vue项目的方法示例
Sep 06 Javascript
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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
yii添删改查实例
2015/11/16 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
起点页面传值js,有空研究学习下
2010/01/25 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
[02:41]辉夜杯现场一家三口 “我爸玩风行 我玩血魔”
2015/12/27 DOTA
Python中的is和id用法分析
2015/01/26 Python
python实现ping的方法
2015/07/06 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
美术教师岗位职责
2014/03/18 职场文书
中学生励志演讲稿
2014/04/26 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
2015年店长工作总结范文
2015/04/08 职场文书