<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<style>
TABLE{
font-family: 宋体;
font-size: 9pt;
border-color:#7195c6;
border-collapse :collapse;
border-width:1px
}
td{
border:#336699 1px solid;
font-size:15px;
color:#02027a
}
</style>
</head>
<body>
<script language="JavaScript">
var myData=[["姓名","年龄","年级","地址,电话","手机","备注"],
[null,null,null,"历史","地理","88888888"],
[null,null,null,null,"本例","66666666"],
[null,null,"一年级","北京三环","_","33333333"],
[null,null,"二年级","上海浦东","_","666666"],
[null,"12","三年级","广州深圳","_","33333222"],
[null,null,"四年级","香港九龙","_","32432432"]]; //将所有数据绑定在数组中
var myDataT,rowcell=[];//默认的2个空数组
document.body.appendChild((myDataT = document.createElement("TABLE")));//在当前窗体中动态添加表格
for(var i=0; i<myData.length; i++){ //遍历表格中每项
var atr = myDataT.insertRow(); //动态添加行
for(var j=0; j<myData[i].length; j++){//遍历某项中的所有数据
if (myData[i][j]==null){ //如果值为空，表示需要合并
rowcell[j].rowSpan++; //使用rowspan
}
else if(myData[i][j]=="_"){ //如果是_，则使用colspan
rowcell[j-1].colSpan++;
}
else{
rowcell[j] = atr.insertCell(); //否则正常添加行
rowcell[j].innerText=myData[i][j]; //显示行内容
}
}
}
</script>
</body>
</html>
例：
首页| 资讯| 移动| 云计算| 空间| 论坛| 博客| 下载| 网摘| 程序员| 书店| 乐知教育 欢迎您：xinkong1010|退出|登录注册|帮助
CSDN-CSDN社区-Web 开发-JavaScript
管理菜单 生成帖子 置顶 推荐 取消推荐 锁定 解锁 移动 编辑 删除 帖子加分 帖子高亮 取消高亮 结 帖 发 帖 回 复 收藏 不显示删除回复显示所有回复显示星级回复显示得分回复 js动态合并单元格（解决即给分）[问题点数:50分，结帖人:liw]
liw
(微微)
等 级：
结帖率：96.43%
楼主发表于：2009-03-06 08:59:30数据是动态生成的。如：
姓名 性别 年龄 科目 分数
张三 男 22 数学 90
张三 男 22 语文 70
张三 男 22 英语 60
李四 女 19 数学 60
李四 女 19 语文 60
王五 男 20 英语 60
要求用js把姓名、性别、年龄列相同的单元格合并。
因为结果集是查询得到的，所以要动态合并。
我已经实现了项目列相同单元格的合并，
但怎样将姓名、性别、年龄3列相同的单元格都合并呢？谢谢。
代码如下
!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="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
<tr>
<td>张三 </td>
<td>男</td>
<td>22</td>
<td>数学 </td>
<td>90 </td>
</tr>
<tr>
<td>张三 </td>
<td>男</td>
<td>22</td>
<td>语文 </td>
<td>70 </td>
</tr>
<tr>
<td>张三 </td>
<td>男</td>
<td>22</td>
<td>英语 </td>
<td>60 </td>
</tr>
<tr>
<td>李四 </td>
<td>女</td>
<td>19</td>
<td>数学 </td>
<td>60 </td>
</tr>
<tr>
<td>李四 </td>
<td>女</td>
<td>19</td>
<td>语文 </td>
<td>60 </td>
</tr>
<tr>
<td>王五 </td>
<td>男</td>
<td>19</td>
<td>英语 </td>
<td>60 </td>
</tr>
</table>
<script >
var tab=document.getElementById("tab");
var name="";
for(var i=0,j=0;i <tab.rows.length;i++,j++) {
if(name==tab.rows[i].cells[0].innerHTML) {
tab.rows[i].deleteCell(0)
} else {
name=tab.rows[i].cells[0].innerHTML;
if(i>0)tab.rows[i-j].cells[0].rowSpan=j;
j=0;
}
}
var name2="";
for(var i=0,j=0;i <tab.rows.length;i++,j++) {
if(name2==tab.rows[i].cells[1].innerHTML) {
tab.rows[i].deleteCell(1)
} else {
name2=tab.rows[i].cells[1].innerHTML;
if(i>0)tab.rows[i-j].cells[1].rowSpan=j;
j=0;
}
}
</script >
</body>
</html>
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 回复次数：17
liw
(微微)
等 级：
#1楼 得分：0回复于：2009-03-06 09:02:59我已经实现了项目列相同单元格的合并，（项目应该改为姓名）
但怎样将姓名、性别、年龄3列相同的单元格都合并呢？谢谢。
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 精华推荐：纯js网页大型游戏:《神魔对决2-天上的激战》(3.8M)，开源发布。
liw
(微微)
等 级：
#2楼 得分：0回复于：2009-03-06 09:14:44要求达到的效果是：
姓名 性别 年龄 科目 分数
数学 90
张三 男 22 语文 70
22 英语 60
李四 女 19 数学 60
语文 60
王五 男 20 英语 60
姓名列的合并如上面的代码已经实现，但性别和年龄列没搞定，谢谢
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 精华推荐：多缓存并存
liw
(微微)
等 级：
#3楼 得分：0回复于：2009-03-06 09:15:53要求达到的效果是：
姓名 性别 年龄 科目 分数
数学 90
张三 男 22 语文 70
英语 60
李四 女 19 数学 60
语文 60
王五 男 20 英语 60
姓名列的合并如上面的代码已经实现，但性别和年龄列没搞定，谢谢
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 精华推荐：JavaScript 颜色梯度和渐变效果
Free_Wind22
(只接分，不回贴)
等 级：
#4楼 得分：0回复于：2009-03-06 09:50:09不要分开来，一次合并就好
HTML code
<!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="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
<tr>
<td>张三 </td>
<td>男 </td>
<td>22 </td>
<td>数学 </td>
<td>90 </td>
</tr>
<tr>
<td>张三 </td>
<td>男 </td>
<td>22 </td>
<td>语文 </td>
<td>70 </td>
</tr>
<tr>
<td>张三 </td>
<td>男 </td>
<td>22 </td>
<td>英语 </td>
<td>60 </td>
</tr>
<tr>
<td>李四 </td>
<td>女 </td>
<td>19 </td>
<td>数学 </td>
<td>60 </td>
</tr>
<tr>
<td>李四 </td>
<td>女 </td>
<td>19 </td>
<td>语文 </td>
<td>60 </td>
</tr>
<tr>
<td>王五 </td>
<td>男 </td>
<td>19 </td>
<td>英语 </td>
<td>60 </td>
</tr>
</table>
<script type="text/javascript">
window.onload = function(){
var tab = document.getElementById("tab");
var name, sex, age, count, start;
name = sex = age = "";
count = 1;
for(var i=0; i<tab.rows.length; i++){
if(name == tab.rows[i].cells[0].innerHTML && sex == tab.rows[i].cells[1].innerHTML && age == tab.rows[i].cells[2].innerHTML){
count++;
}else{
if(count > 1){ //合并
start = i - count;
tab.rows[start].cells[0].rowSpan = tab.rows[start].cells[1].rowSpan = tab.rows[start].cells[2].rowSpan = count;
for(var j=start+1; j<i; j++){
for(var k=0; k<3; k++){
tab.rows[j].removeChild(tab.rows[j].cells[0]);
}
}
count = 1;
}
name = tab.rows[i].cells[0].innerHTML;
sex = tab.rows[i].cells[1].innerHTML;
age = tab.rows[i].cells[2].innerHTML;
}
}
};
</script>
</body>
</html>
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 精华推荐：JavaScript 拖放效果
liw
(微微)
等 级：
#5楼 得分：0回复于：2009-03-06 10:04:26Free_Wind22:你的代码不能实现动态数据呀？比如姓名里张三有4个或5个，还是不符合要求，怎么实现动态的呢？
如：
姓名 性别 年龄 科目 分数
张三 男 22 数学 90
张三 男 22 语文 70
张三 男 22 英语 60
张三 男 22 化学 60
李四 女 19 语文 60
王五 男 20 英语 60
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 精华推荐：(BlueDestiny) 出道javascript的题, 顺带散分~
Free_Wind22
(只接分，不回贴)
等 级：
#6楼 得分：0回复于：2009-03-06 10:08:03无语，你都没试怎么知道．．
你表格是动态的就可以了．．
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP
liw
(微微)
等 级：
#7楼 得分：0回复于：2009-03-06 10:10:38我试过的，不行呀
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP
liw
(微微)
等 级：
#8楼 得分：0回复于：2009-03-06 10:11:59我把第4行的李四改为张三，结果这个张三没合并进去
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP
liw
(微微)
等 级：
#9楼 得分：0回复于：2009-03-06 10:15:54我第意思是第1、2、3列合并的单元格数都是动态的，并不一定是相同的一个数，比如第1列合并4个单元格，第2列可能合并3个单元格，第3列可能合并2个单元格，也许是我没说清楚
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP
Free_Wind22
(只接分，不回贴)
等 级：
#10楼 得分：0回复于：2009-03-06 10:21:16我这个是这样考虑的，一个班可能有同名的同学.所以要姓名，性别，年龄全部相同才算同一个人，
所以你改第四个的姓名，这不算同一个人．所以没合并进去．．
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP
liw
(微微)
等 级：
#11楼 得分：0回复于：2009-03-06 10:23:06姓名性别年龄列相同的单元格是动态的
如：
姓名 性别 年龄 科目 分数
张三 男 22 数学 90
张三 男 22 语文 70
张三 男 19 英语 60
张三 女 20 化学 60
李四 女 19 语文 60
王五 男 20 英语 60
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP
liw
(微微)
等 级：
#12楼 得分：0回复于：2009-03-06 10:27:08只要前3列里相同的就合并，比如上面表第1列的4个张三，第2列开始的3个男，接下来的2个女，第3列开始2个22等，要完成这样动态的要求怎样实现？谢谢
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP
liw
(微微)
等 级：
#13楼 得分：0回复于：2009-03-06 10:41:41也许我举的例子不是很恰当，不是一个班的同学，反正就是前3列相同的单元格是动态的，但这3列里只要是相同的数据就合并单元格
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP
Free_Wind22
(只接分，不回贴)
等 级：
#14楼 得分：50回复于：2009-03-06 10:46:27这个应该符合你这种需求了...
HTML code
<!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="100%" border="1" cellspacing="0" cellpadding="0" id="tab">
<tr>
<td>张三 </td>
<td>男 </td>
<td>22 </td>
<td>数学 </td>
<td>90 </td>
</tr>
<tr>
<td>张三 </td>
<td>男 </td>
<td>22 </td>
<td>数学 </td>
<td>90 </td>
</tr>
<tr>
<td>张三 </td>
<td>男 </td>
<td>22 </td>
<td>语文 </td>
<td>70 </td>
</tr>
<tr>
<td>张三 </td>
<td>女 </td>
<td>22 </td>
<td>英语 </td>
<td>60 </td>
</tr>
<tr>
<td>李四 </td>
<td>女 </td>
<td>22 </td>
<td>数学 </td>
<td>60 </td>
</tr>
<tr>
<td>李四 </td>
<td>女 </td>
<td>19 </td>
<td>语文 </td>
<td>60 </td>
</tr>
<tr>
<td>王五 </td>
<td>男 </td>
<td>19 </td>
<td>英语 </td>
<td>60 </td>
</tr>
</table>
<script type="text/javascript">
window.onload = function(){
var tab = document.getElementById("tab");
var maxCol = 3, val, count, start;
for(var col = maxCol-1; col >= 0 ; col--){
count = 1;
val = "";
for(var i=0; i<tab.rows.length; i++){
if(val == tab.rows[i].cells[col].innerHTML){
count++;
}else{
if(count > 1){ //合并
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for(var j=start+1; j<i; j++){
tab.rows[j].cells[col].style.display = "none";
}
count = 1;
}
val = tab.rows[i].cells[col].innerHTML;
}
}
if(count > 1 ){ //合并，最后几行相同的情况下
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for(var j=start+1; j<i; j++){
tab.rows[j].cells[col].style.display = "none";
}
}
}
};
</script>
</body>
</html>
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP
Free_Wind22
(只接分，不回贴)
等 级：
#15楼 得分：0回复于：2009-03-06 10:49:26上面这个是用隐藏的，也可以用
tab.rows[j].removeChild(tab.rows[j].cells[col]);
来代替
tab.rows[j].cells[col].style.display = "none";
来删除多余的列
分享到：
相关推荐
js 实现 动态生成包含合并单元格的表格! 值得下载看看!资源免费,大家分享!!
### Java后端生成PDF模板合并单元格表格案例详解 #### 概述 本文将详细介绍一个Java后端生成PDF模板，并在此基础上实现单元格合并功能的案例。案例的主要目的是展示如何在Java环境中创建复杂的表格结构，并将其导出...
在jasperReport中，动态合并单元格是一项重要的功能，它能够根据数据的特性和需求灵活调整表格的布局，使得报告更加整洁且易于阅读。本示例将详细介绍如何在jasperReport中实现动态合并单元格。 首先，我们需要了解...
综上所述，实现列表多行多列合并单元格涉及到HTML表格的基本操作，以及JavaScript动态计算和设置`colspan`和`rowspan`属性。在开发过程中，还需要考虑交互性、响应式设计和性能优化，确保在各种环境下都能提供良好的...
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
在Word处理方面，NPOI提供了IWdDocument接口，通过这个接口我们可以对Word文档进行各种操作，包括合并单元格。 首先，我们需要引入NPOI相关的NuGet包，如`NPOI`和`NPOI.HPSF`。安装后，我们就可以在项目中使用NPOI...
本主题将深入探讨如何利用JasperReport实现动态单元格合并，支持多层分组排序和多分组动态合并单元格。 首先，我们要理解JasperReport的基本概念。JasperReport是一个基于Java的报告设计库，它允许开发者通过JRXML...
1. **报表生成**：在生成包含大量合并单元格的报表时，正确处理合并单元格对于保证报表的准确性和美观性至关重要。 2. **数据分析**：当从 Excel 文件中读取数据进行分析时，确保能够正确识别和处理合并单元格可以...
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
在本示例中，我们将重点讨论如何使用 Apache POI 来生成 Excel 文件，并进行单元格的合并操作。 首先，我们需要引入 Apache POI 的相关依赖库。如果你使用的是 Maven，可以在项目的 `pom.xml` 文件中添加以下依赖：...
FastReport VCL向下合并单元格，从网上的代码修改而来，FastReport 5.X亲测可用。
6. **性能优化**：如果表格包含大量数据，处理合并操作可能会影响页面性能。开发者可能采用一些优化策略，比如延迟计算、分批处理或者利用Web Workers在后台线程中执行复杂的计算。 综上所述，"仿Excel合并单元格...
本项目提供了一个解决方案，它支持合并单元格和合并行，无需依赖Microsoft Office，这对于那些无法安装Office环境或者希望在服务器端执行此操作的用户来说，具有很高的实用价值。 首先，我们要理解HTML表格...
3. **合并单元格**：在某些情况下，我们需要合并表格中的单元格以达到特定的布局效果。PHPWord提供了`setMerge()`方法来实现这一点。例如，`$cell->setMerge($startRow, $endRow, $startCol, $endCol)`，可以合并从...
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
Labview 合并Excel多单元格 1-可合并表头，多方面合并，与手工操作一致，批量执行
合并单元格好JS，特别适用与动态生成表格的单元格合并，报表开发
根据提供的文件信息，我们可以深入探讨如何在 Ext JS 中实现 Grid 的单元格合并功能。此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的，并且还涉及了模板（Template）的使用、...
在描述中提到的"bootstrap-table导出合并单元格"是该插件的一个高级特性，允许用户在导出表格时，将具有相同内容的单元格进行合并，以提高数据的可读性和美观性。 1. **Bootstrap Table简介** Bootstrap Table是一...
在PHP开发中，有时我们需要处理数据的导出功能，特别是...通过以上步骤，我们可以成功地根据Excel模板生成带有合并单元格的新Excel文件。在实际开发中，可能还需要考虑错误处理、样式设置等细节，以满足各种业务需求。