脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js合并单元格

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实现百度网盘任意文件强制下载功能

    这篇文章主要介绍了JS实现百度网盘任意文件强制下载 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-08-08
  • TypeScript实现数组和树的相互转换

    TypeScript实现数组和树的相互转换

    树或者图是个比较抽象的概念，并不存在这样的数据类型。数组就比较简单了，因此数组和树的转换可以理解为数组和对象之间的转换。本文将用TypeScript实现数组和树的相互转换，感兴趣的可以了解一下
    2022-06-06
  • JS中sort函数排序用法实例分析

    JS中sort函数排序用法实例分析

    这篇文章主要介绍了JS中sort函数排序用法,结合实例形式详细分析了sort函数的功能、原理及实现数组排序的相关技巧,代码中备有详尽的注释便于理解,需要的朋友可以参考下
    2016-06-06
  • uniapp分包(小程序分包)处理图文详解

    uniapp分包(小程序分包)处理图文详解

    小程序上传的时候,主包不能超过2M,如果超出,则会上传失败,这时候就需要把界面进行分包,下面这篇文章主要给大家介绍了关于uniapp分包(小程序分包)处理的相关资料,需要的朋友可以参考下
    2023-01-01
  • 怎样在CocosCreator中使用物理引擎关节

    怎样在CocosCreator中使用物理引擎关节

    这篇文章主要介绍了怎样在CocosCreator中使用物理引擎关节，对物理引擎感兴趣的同学，着重要看一下
    2021-04-04
  • js实现基于正则表达式的轻量提示插件

    js实现基于正则表达式的轻量提示插件

    这篇文章主要介绍了基于正则表达式的轻量提示插件，兼容性强却文件轻巧的文本框检测插件,推荐给大家，有需要的小伙伴可以参考下。
    2015-08-08
  • javascript实现控制div颜色

    javascript实现控制div颜色

    本文给大家分享的是使用javascript实现控制DIV背景色的代码，非常的简单实用，有需要的小伙伴可以参考下。
    2015-07-07
  • Js利用console计算代码运行时间的方法示例

    Js利用console计算代码运行时间的方法示例

    最近看了一本书，发现了个计算代码执行时间的方法，感觉还挺有用的，所以这篇文章主要给大家介绍了关于Javascript利用console计算代码运行时间的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
    2017-09-09
  • 微信小程序之下拉列表实现方法解析（附完整源码）

    微信小程序之下拉列表实现方法解析（附完整源码）

    这篇文章主要介绍了微信小程序之下拉列表实现方法解析（附完整源码）,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • COM组件中调用JavaScript函数详解及实例

    COM组件中调用JavaScript函数详解及实例

    这篇文章主要介绍了COM组件中调用JavaScript函数详解及实例的相关资料,需要的朋友可以参考下
    2017-02-02

最新评论