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

更新时间：2013年08月11日 18:39:57 作者：

表格相同内容单元格的合并在以前也有过类似的教程，本文为大家讲解的是使用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> 

您可能感兴趣的文章:

js实现模拟购物商城案例
这篇文章主要为大家详细介绍了js实现模拟购物商城案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
JS模拟实现京东快递单号查询
这篇文章主要为大家详细介绍了JS模拟实现京东快递单号查询，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-11-11
微信小程序实现左滑删除效果源码
这篇文章主要给大家介绍了关于微信小程序实现左滑删除效果的相关资料,左滑删除效果在app的交互方式中十分流行,比如全民应用微信,文中给出了详细的实现代码,需要的朋友可以参考下
2023-08-08
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
上个礼拜修改测试一个后台管理项目，在测试与各个浏览器兼容性的时候，发现在chrome浏览器下showModalDialog方法显示的并不是模态对话框，就像新打开一个页面一样，父窗口仍然可以随意获取焦点，并可以打开多个窗体，而且返回值returnValue也无法返回，一直是undefined
2016-10-10
微信小程序配置视图层数据绑定相关示例
这篇文章主要为大家介绍了微信小程序配置视图层数据绑定相关示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪<BR>
2022-04-04
小程序实现侧滑删除功能
这篇文章主要为大家详细介绍了小程序实现侧滑删除功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-06-06
微信小程序新手教程之页面打开数量限制
这篇文章主要给大家介绍了关于微信小程序新手教程之页面打开数量限制的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03
js使用Canvas将多张图片合并成一张的实现代码
这篇文章主要介绍了js使用Canvas将多张图片合并成一张的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
这篇文章通过php+jquery+ajax+mysql相结合，实现当用户浏览网站文章或者是论坛帖子后，想表达自己浏览后的心情，发表自己的感受，很多网站都提供了用户发表心情的功能，通过此功能可以很直观的分析文章或者是论坛对浏览者的用户体验度
2015-08-08
使用JavaScript实现一个交互式待办事项列表
JavaScript是一种强大的脚本语言,广泛应用于Web开发中,本文将通过一个完整的项目实例,演示如何使用JavaScript来实现一个交互式的待办事项列表,,需要的朋友可以参考下
2023-08-08