Javascript合并表格中具有相同内容单元格示例


Posted in Javascript onAugust 11, 2013

效果图:
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"> 
function mc(tableId, startRow, endRow, col) { 
var tb = document.getElementById(tableId); 
if (col >= tb.rows[0].cells.length) { 
return; 
} 
if (col == 0) { endRow = tb.rows.length-1; } 
for (var i = startRow; i < endRow; i++) { 
if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[0].innerHTML) { 
tb.rows[i + 1].removeChild(tb.rows[i + 1].cells[0]); 
tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1; 
if (i == endRow - 1 && startRow != endRow) { 
mc(tableId, startRow, endRow, col + 1); 
} 
} else { 
mc(tableId, startRow, i + 0, col + 1); 
startRow = i + 1; 
} 
} 
} 
mc('table1',0,0,0); 
</script>
Javascript 相关文章推荐
二级域名转向类
Nov 09 Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
js获取php变量的实现代码
Aug 10 #Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 #Javascript
jquery对象和DOM对象的区别介绍
Aug 09 #Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 #Javascript
javascript判断机器是否联网的2种方法
Aug 09 #Javascript
jquery 列表双向选择器之改进版
Aug 09 #Javascript
jquery 简单应用示例总结
Aug 09 #Javascript
You might like
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
python实现百度关键词排名查询
2014/03/30 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
详解python statistics模块及函数用法
2019/10/27 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
Python如何进行时间处理
2020/08/06 Python
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
助人为乐表扬信范文
2014/01/14 职场文书
小学开学寄语
2014/01/19 职场文书
应届毕业生简历自我评价
2014/01/31 职场文书
春节请假条
2014/04/11 职场文书
骨干教师申报材料
2014/12/17 职场文书
《山中访友》教学反思
2016/02/24 职场文书