<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<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实现HTML表格单元格的合并功能的更多相关文章

  1. JQuery合并表格单元格

    转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格   一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...

  2. 如何让elemengUI中的表格组件相同内容的单元格自动合并

    1. 前言 这两天在工作中遇到这样一个需求:将某个Excel中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与Excel中一致.在原始Excel文件中,对每一行相同的数据都进行了合并,使得数据 ...

  3. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  4. 关于.net Microsoft.Office.Interop.Word组建操作word的问题，如何控制word表格单元格内部段落的样式。

    控制word表格单元格内部文字样式.我要将数据导出到word当中,对于word表格一个单元格中的一段文字,要设置不同的样式,比如第一行文字作为标题要居中,加粗,第二行为正常的正文. 代码如下 publ ...

  5. 关于html表格单元格宽度的计算规则

    * { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...

  6. 葡萄城报表 SP2 新特性（1）— 单元格智能合并

    中国式复杂报表的布局,因为数据的动态性和结构性,导致其布局往往是无规律,且在设计时无法预测的,如单元格合并,通常不仅希望在每一列的数据展现中,能够根据需要自动将相同的单元格合并,且每个单元格之间该属性 ...

  7. Bootstrap：Bootstrap_table第一篇：快速用bootstrap_table（支持参数）筛选并展示数据，固定表格前几列，实现表格单元格编辑

    1.准备好css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ...

  8. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  9. EXCEL表格单元格中包含数字英文和汉字，如何自动去掉汉字，保留英文和数字

    EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母   Dim myReg    ...

随机推荐

  1. Spring中applicationContext.xml的bean里的id和name属性区别

    转自:http://www.cnblogs.com/ztf2008/archive/2009/02/11/1388003.html <beans><bean id="per ...

  2. NGUI学习笔记（六）：ScrollView、Grid和Table

    下面我们来看看游戏UI开发中比较核心的开发,我称为列表开发,比如背包和各种形式不一的列表等,下面我们来看几个具体的样例:   基本上就是一些重复的制作好的多个UI控件进行排列,同时可以支持滚动,当然, ...

  3. nyoj905 卡片游戏

    卡片游戏 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 小明最近宅在家里无聊,于是他发明了一种有趣的游戏,游戏道具是N张叠在一起的卡片,每张卡片上都有一个数字,数字 ...

  4. vue2.0的ajax

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...

  5. Hdu1163 Eddy's digitai Roots(九余数定理）

    题目大意: 给定一个正整数,根据一定的规则求出该数的“数根”,其规则如下: 例如给定 数字 24,将24的各个位上的数字“分离”,分别得到数字 2 和 4,而2+4=6: 因为 6 < 10,所 ...

  6. JAVA-JSP指令元素之page指令

    相关资料:<21天学通Java Web开发> 结果总结:1.page设定JSP页面全局属性,作用于整个JSP页面,包括静态包含的文件2.<%@ page 属性1="属性值1 ...

  7. 【工具】小巧好用的屏幕截图工具——ScrToPic

    百度搜ScrToPic,有绿色版的用. 好处: 小巧快捷,不用为了截图而开QQ,不用看QQ的弹窗广告. 可以自定义截图区域和窗口捕捉,可以自定义这两个功能的快捷键. 截图时可以选择要不要显示鼠标. 窗 ...

  8. Liunx 安装 Mysql 5.7

    #[安装 Mysql 5.7] # 00.系统目录说明# 安装文件下载目录:/data/software# Mysql目录安装位置:/usr/local/mysql# 数据库保存位置:/data/my ...

  9. C#程序运行流程

    我们写好的C#代码操作系统是如何能识别呢,我们都知道操作系统只能认识二进制 机器代码,下面用图来表示 因为C#是安全的托管代码 同时CLR会在内存中创建应用程序域 托管代码:被CLR管理的代码 非托管 ...

  10. 很有必要了解的HTML嵌套规则

    最近在重新学习HTML的知识,算是对HTML的一个重新认识吧!别小看了这东西,一切的网页可都是以它为基础的!下面就详细归纳一下HTML标签的嵌套规则吧,希望对大家有所帮助. XHTML的标签有许多:d ...