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 相关文章推荐
JavaScript运算符小结
Jun 03 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
说说如何利用 Node.js 代理解决跨域问题
Apr 22 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
JS实现关闭小广告特效
Jan 29 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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php 文件缓存函数
2011/10/08 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
浅谈Vue 性能优化之深挖数组
2018/12/11 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
python中二维阵列的变换实例
2014/10/09 Python
Python发送email的3种方法
2015/04/28 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
python打造爬虫代理池过程解析
2019/08/15 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
Python random模块的使用示例
2020/10/10 Python
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
临床医学应届生求职信
2013/11/06 职场文书
健康状况证明模板
2014/10/23 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库