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 当采用分离边框模型时,表 ...
随机推荐
- JAVA中通过JavaCV实现跨平台视频/图像处理-调用摄像头
一.简介 JavaCV使用来自计算机视觉领域(OpenCV, FFmpeg, libdc1394, PGR FlyCapture, OpenKinect, librealsense, CL PS3 E ...
- docker 安装hadoop
上一篇文章介绍了一些docker的基本命令,这篇文章来安装一个HADOOP 一.下载hadoop镜像 @~/git/github/docker-ambari (master)$ docker pull ...
- Spark机器学习(9)：FPGrowth算法
关联规则挖掘最典型的例子是购物篮分析,通过分析可以知道哪些商品经常被一起购买,从而可以改进商品货架的布局. 1. 基本概念 首先,介绍一些基本概念. (1) 关联规则:用于表示数据内隐含的关联性,一般 ...
- Android官方开发文档Training系列课程中文版：性能优化建议
原文地址:http://android.xsoftlab.net/training/articles/perf-tips.html 本篇文章主要介绍那些能够提升总体性能的微小优化点.它与那些能突然改观 ...
- （亲测解决）每次打开excel文件都会出现两个窗口，一个是空白的sheet1，另一个是自己的文档
版权声明:本文为博主原创文章,转载请注明出处! https://blog.csdn.net/sinat_34104446/article/details/80210424 一.问题描述每次打开Exce ...
- V-rep学习笔记：关节力矩控制
Torque or force mode When the joint motor is enabled and the control loop is disabled, then the join ...
- 在mysql中如何写注释语句
//在mysql中如何写注释语句 mysql; # 这个注释直到该行结束 mysql; -- 这个注释直到该行结束 mysql ; mysql+ /* 这是一个 多行注释的形式 */ ;
- 五分钟搞清楚MySQL事务隔离级别
好久没碰数据库了,只是想起自己当时在搞数据库的时候在事务隔离级别这块老是卡,似懂非懂的.现在想把这块整理出来,尽量用最简洁的语言描述出来,供新人参考. 首先创建一个表account.创建表的过程略过( ...
- MySQL -- Innodb中的change buffer
change buffer是一种特殊的数据结构,当要修改的辅助索引页不在buffer pool中时,用来cache对辅助索引页的修改.对辅助索引页的操作可能是insert.update和delete操 ...
- 使用jackson来进行数组格式的json字符串转换成List。
有一个字符串如下.如下,也是通过jackson把list转换成的json字符串,我想把它转过来,看网上的内容都不尽人如意,都是片断的内容.估计只有写的知道怎么使用,所以就直接看了jackson的官网, ...