Javascript合并表格相同内容单元格示例
效果图:
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格相同内容合并</title>
</head> <body>
合并前：
<table width="400" border="1">
<tr>
<td>a</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>a</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td>3</td>
<td>4</td>
<td>6</td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td>3</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>cc</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td> </td>
</tr>
<tr>
<td>cc</td>
<td>2</td>
<td>3</td>
<td>5</td>
<td>5</td>
<td> </td>
</tr>
<tr>
<td>d</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
<tr>
<td>e</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
</table><br />
合并后：<br />
<table width="400" border="1" id="table1">
<tr>
<td>a</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>a</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>6</td>
</tr>
<tr>
<td>a</td>
<td>2</td>
<td>3</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td>3</td>
<td>4</td>
<td>6</td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>b</td>
<td>3</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>cc</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td> </td>
</tr>
<tr>
<td>cc</td>
<td>2</td>
<td>3</td>
<td>5</td>
<td>5</td>
<td> </td>
</tr>
<tr>
<td>d</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
<tr>
<td>e</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td> </td>
</tr>
</table>
</body>
</html>
JS:
<script type="text/javascript">
///合并表格相同行的内容
///tableId：表格ID（最好是tbody，避免把表尾给合并了)
///startRow：起始行，没有标题就从0开始
///endRow：终止行，此参数是递归时检查的范围，一开始时会自动赋值为最后一行
///col：当前处理的列
function MergeCell(tableId, startRow, endRow, col) {
var tb = document.getElementById(tableId);
if (col >= tb.rows[0].cells.length) {
return;
}
//当检查第0列时检查所有行
if (col == 0) {
endRow = tb.rows.length - 1;
}
for (var i = startRow; i < endRow; i++) {
//subCol:已经合并了多少列
var subCol = tb.rows[0].cells.length - tb.rows[startRow].cells.length;
//程序是自左向右合并，所以下一行一直取第0列
if (tb.rows[startRow].cells[col - subCol].innerHTML == tb.rows[i + 1].cells[0].innerHTML) {
//如果相同则删除下一行的第0列单元格
tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[0]);
//更新rowSpan属性
tb.rows[startRow].cells[col - subCol].rowSpan = (tb.rows[startRow].cells[col - subCol].rowSpan | 0) + 1;
//当循环到终止行前一行并且起始行和终止行不相同时递归(因为上面的代码已经检查了i+1行，所以此处只到endRow-1)
if (i == endRow - 1 && startRow != endRow) {
MergeCell(tableId, startRow, endRow, col + 1);
}
} else {
//起始行，终止行不变，检查下一列
MergeCell(tableId, startRow, i, col + 1);
//增加起始行
startRow = i + 1;
}
}
}
MergeCell('table1', 0, 0, 0);
</script>
Javascript合并表格相同内容单元格示例的更多相关文章
- javascript动态合并表格相同的单元格
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- JQuery实现表格的相同单元格合并的三种方法
代码: <!DOCTYPE html> <html> <head> <title>merge.html</title> <meta h ...
- 解决boostrap-table有水平和垂直滚动条时，滚动条滑到最右边表格标题和内容单元格无法对齐的问题
问题:boostrap-table有水平和垂直滚动条时,滚动条不高的时候(滚动高度比较大的时候没有问题),滚动条滑到最右边表格标题和内容单元格无法对齐的问题 问题原因:bootstrap-table源 ...
- FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架
这是一篇很长的文章,在开始正文之前,请允许我代表目前排名前 20 中唯一的 .Net 开源软件 FineUI 拉下选票: 投票地址: https://code.csdn.net/2013OSSurve ...
- Swift - 给表格添加移动单元格功能（拖动行）
1,下面的样例是给表格UITableView添加单元格移动功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,可以看到单元格后面出现拖动按钮 (3)鼠标按住拖动按钮,可以 ...
- NX二次开发-UFUN工程图表格注释设置单元格首选项UF_TABNOT_set_cell_prefs
NX9+VS2012 #include <uf.h> #include <uf_tabnot.h> #include <NXOpen/Part.hxx> #incl ...
- Spire.Cloud.SDK for Java 合并、拆分Excel单元格
Spire.Cloud.SDK for Java 是Spire.Cloud云产品系列中,用于处理Word.Excel.PowerPoint以及PDF文档的JAR文件,可执行文档编辑.转换.保存等操作. ...
- elementui——表格的相同内容单元格合并
在今天工作中遇到了相同单元格需要合并的一个需求,实现记录如下. 实现效果: 任务要求: 对表中体系这一列相同的体系进行合并. 思路:定义一个空数组:[]定义一个变量:0遍历数据如果有相同数据 在空数组 ...
- CSS开发技巧(二）：表格合并边框后的单元格宽度计算
前言: 分离边框模型和合并边框模型是表格的两种模型,它通过以下属性确定: border-collapse:separate(默认值) | collapse | inherit 当采用分离边框模型时,表 ...
随机推荐
- Machine、Swarm、Compose、SocketPlane这些Docker生态圈软件各解决了哪些问题？
Machine:解决的是操作系统异构安装Docker困难的问题,没有Machine的时候,CentOS是一种,Ubuntu又是一种,AWS又是一种.有了Machine,所有的系统都是一样的安装方式. ...
- [Python设计模式] 第2章 商场收银软件——策略模式
github地址: https://github.com/cheesezh/python_design_patterns 题目 设计一个控制台程序, 模拟商场收银软件,根据客户购买商品的单价和数量,计 ...
- Spark GraphX实例(3)
7. 图的聚合操作 图的聚合操作主要的方法有: (1) Graph.mapReduceTriplets():该方法有一个mapFunc和一个reduceFunc,mapFunc对图中的每一个EdgeT ...
- android中Textview 和图片同时显示时，文字省略号显示，图片自动靠到右边
很纠结的一个标题,实在是不知道怎么去描述这个现象. 上图片吧,先看看需求是什么样的. 1.需求: 视频与票的图标跟在标题后面显示,当标题过长时icon显示到省略号…后(textview省略号显示, ...
- 【转载】C# Graphics类具体解释
封装一个 GDI+ 画图图面. 此类不能被继承.System.Drawing 命名空间 名称 说明 Clip 获取或设置 Region.该对象限定此 Graphics 的画图区域. ClipBoun ...
- Winform开发框架之通用附件管理模块 --SNF快速开发平台3.3-Spring.Net.Framework
最近项目太多都没有时间写文章了,实际项目需求一,CS端和windows平板都需要附件上传管理功能.以前做的都是BS的附件管理和上传功能.本来计划在Winform上嵌套一个浏览器直接用bs的附件上传功能 ...
- Linux install svn server
ref: http://blog.csdn.net/pingnanlee/article/details/8812520 1. yum -y install subversion 2. svnadmi ...
- Oracle---常用SQL语法和数据对象
1.INSERT (往数据表里插入记录的语句) INSERT INTO 表名(字段名1, 字段名2, ……) VALUES ( 值1, 值2, ……); INSERT INTO 表名(字段名1, 字 ...
- 【Unity】Protobuf的使用与常见问题
Protobuf的使用流程 protobuf参考教程:https://www.jianshu.com/p/b135676dbe8d 手写.proto文件后,用CMD命令行运行protoc.exe编译器 ...
- hdoj：2040
#include <iostream> #include <vector> using namespace std; vector<long> yueShu(lon ...