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

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery
， html
， 表格
， 合并
单元格
jquery表格合并单元格、jquery 合并单元格、jquery动态合并单元格、jquery合并单元格插件、jquery td 合并单元格，以便于您获取更多的相关知识。

时间： 2024-10-15 01:44:35

jQuery实现HTML表格单元格的合并功能_jquery的相关文章

鼠标-jQuery实现类似excel一样拖动选择table单元格进行合并，如何实现？

问题描述 jQuery实现类似excel一样拖动选择table单元格进行合并,如何实现? 在任意单元格,按下鼠标后,可以选中多个行和多个列,松开鼠标后,这些单元格的背景色变化(就像是Excel拖动单元格选择似的那种) 将拖动选中的单元格进行合并 现在可以选中合并了,但我要的是点击右键菜单 合并单元格 然而 选中之后 点击右键,选中的单元格就没有了 只剩右键点击的那一个单元格.有什么解决方法吗??? 解决方案 可以试试bootstrap插件,不知道行不行 解决方案二: 这些可以实现,就用mouse

table单元格选中合并-table 下面代码这里只是列选中，改成行列都可以选中合并该怎么做？或者有其他方法来实现也可以。

问题描述 table 下面代码这里只是列选中,改成行列都可以选中合并该怎么做?或者有其他方法来实现也可以. <!DOCTYPE HTML> <HTML> <head> <TITLE>The document title</TITLE> <meta charset=utf-8> <script src="lib/jquery-1.8.1.min.js" type="text/javascript&qu

jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】_jquery

本文实例讲述了jQuery实现点击表格单元格就可以编辑内容的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/

Word表格单元格的拆分与合并

要做一个完整的表格,很多时候需要将单元格进行拆分或者合并,才能达到需要的效果.相比word表格,单元格的拆分与合并就简单多了. 单元格的合并:先选中欲合并的那些单元格,点击右键,在弹出的菜单中点击合并单元格命令,就可 单元格的拆分:将鼠标定位到拆分的单元格中,然后点击右键,在弹出的菜单中点击拆分单元格命令,打开拆份单元格对话框,在此设置要拆分的列数和行数,确定主就可以了.

java怎么将 excel表格含义空单元格、合并的单元格怎么导入数据库

问题描述 java怎么将 excel表格含义空单元格.合并的单元格怎么导入数据库 java excel表格含义空单元格.合并的单元格怎么导入数据库 解决方案 JAVA POI 操作EXCEL 合并单元格 解决方案二: 你是不会用Java读取Excel还是读取了但是不能写入数据库,, 具体是什么问题,, POI操作Excel:http://blog.csdn.net/hekewangzi/article/category/5698027 解决方案三: 可以使用java的POI完成对excel的操作

javascript合并表格单元格实例代码_javascript技巧

本文为大家介绍了一段来源于网络上的代码实例,能够合并单元格,下面和大家分享一下,希望能够给需要的朋友或多或少带来一定的帮助. 代码实例如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>表格单元格合并代码</title> <script type="text/javascript"> function au

excel表-poi如何判断excel单元格为合并单元格

问题描述 poi如何判断excel单元格为合并单元格 今天在用poi读取excel表格的时候发现使用cell.getArrayFormulaRange()并不能返回这个单元格的边界.请问该如何判断单元格为合并单元格并获取合并单元格的行数列数

Excel怎么把多个单元格数据合并到1个单元格里?

  Excel怎么把多个单元格数据合并到1个单元格里? 1.首先打开要使用的表格. 2.然后选择A列和B列的数据到C列.选择A列的数据加上&"-"&和B列的数据 3.把信息都输入之后需要点击保存就就可以得到我们所需要的数据. 4.按照C列的数据选中单元格然后往下拉 5.然后就可以得到整体的数据啦,是不是很方便

Excel单元格的合并动画教程

Excel2003是一款经典的办公软件,专业的制表软件,其中包括表格制作.公式运算.函数使用.图表制作等强大功能.Excel是办公族必不可少的软件之一.下面为大家分享<Excel2003入门动画教程1.Excel单元格的合并>. 演示动画 操作步骤 单元格的合并:同时选中需要合并的单元格(如A1:G1),然后按一下"格式"工具栏上的"合并及居中"按钮即可. 撤销单元格的合并:选中合并后的单元格,然后再按一下"格式"工具栏上的"