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 当采用分离边框模型时,表 ...
随机推荐
- CentOS 7安装nVIDIA显卡驱动程序
1. 到http://www.geforce.cn/drivers,根据显卡的型号,选择下载相应的驱动程序,一般是.run文件: 2. 运行下载的.run文件,会提示X Server正在运行,不能安装 ...
- [转]Visual Studio 2010 中安装Qt 5.1
截至目前(2013年7月12日)为止,Qt 的最高版本为Qt5.1,在该版本中已经将Qt Creator与Qt Lib集成在一个文件夹中,因此安装的时候较为方便,只需安装一个即可.因为Qt具有超强的可 ...
- Emacs flycheck插件配置中遇到的若干问题
工欲善其事必先利其器,一个高效的代码检查工具会大大提高我们的开发效率.flycheck是Emacs中常用的一个代码编译检查工具,本文记录配置它的时候遇到的一些问题以及解决方法. flycheck的基本 ...
- 【Windows】查看Windows上运行程序的异常日志
任何在windows系统上运行的程序,只要发生异常导致程序异常终止,windows都会在日志中详细记录这个异常.可以在计算机管理中查看,如图:也可以在操作中心查看,如图:
- alter日志报WARNING: too many parse errors
数据库版本:12.2.0 操作系统版本:RHEL7.2 最近观察到一个数据库alert日志老是报硬解析太多错误,且对应的sql语句都是查看数据字典表: 2017-06-16T08:46:46.4174 ...
- 何为编码 GBK 和 UTF8编码？GBK，GB2312与区位码有何关系？
何为GBK,何为GB2312,与区位码有何渊源? 区位码是早些年(1980)中国制定的一个编码标准,如果有玩过小霸王学习机的话,应该会记得有个叫做“区位”的输入法(没记错的话是按F4选择).就是打四个 ...
- HDU_3746 Cyclic Nacklace(KMP)
题目请点我 题解: 题目大意:有一个字符串s.能够在前后加入字符,使字符串成为一个循环次数至少为2的循环字符串.输出最少须要加入的字符数目. 首先能够证明题目能够等价为仅仅在末尾加入字符使满足题意.要 ...
- python 函数的参数的几种类型
定义函数的时候,我们把参数的名字和位置确定下来,函数的接口定义就完成了.对于函数的调用者来说,只需要知道如何传递正确的参数,以及函数将返回什么样的值就够了,函数内部的复杂逻辑被封装起来,调用者无需了解 ...
- 【iCore1S 双核心板_FPGA】例程七：基础逻辑门实验——逻辑门使用
实验现象: 打开tool-->Netlist viewer-->RTL viewer可观察各个逻辑连接 核心代码: //-----------------Module_logic_gate ...
- Java动态代理与反射详解
首先我得先请大家不要误会,博客园说转载的文章放在文章分类里,原创的文章用随笔写,我开先还以为随笔是拿来写抒情文的(滑稽),后来才发现不是这样的,但是自己所有的文章都在文章分类里了,又懒得搬运,所以我就 ...