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 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
js仿微信公众平台打标签功能
Apr 08 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
vue点击当前路由高亮小案例
Sep 26 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
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
JSON 数据格式介绍
2012/01/13 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
input框中的name和id的区别
2016/11/16 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
Angular之jwt令牌身份验证的实现
2020/02/14 Javascript
Vue Render函数原理及代码实例解析
2020/07/30 Javascript
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
python使用minimax算法实现五子棋
2019/07/29 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
sort命令的作用和用法
2013/08/25 面试题
高中军训感言500字
2014/02/24 职场文书
赔偿协议书范本
2014/04/15 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
2015年共青团工作总结
2015/05/15 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android