<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模板合并单元格表格的案例.docx
列表多行多列合并单元格，对列表进行多列合并，在开发WEB报表中非常有用
实现功能点 1.行的合并 2.列的合并 3.给表头添加斜线 4.动态生成列
合并单元格好JS，特别适用与动态生成表格的单元格合并，报表开发
easyuiPoi 通过模板导出Excel、支持纵向合并单元格（合并重复内容）。压缩包包含公共工具类、示例模板、调用截图。
Labview 合并Excel多单元格 1-可合并表头，多方面合并，与手工操作一致，批量执行
使用bootstrap-table客户端分页生成表格，导出表格按照单元格内容相同合并单元格
整合优化PHPword导出表格，优化项添加表格，行内换行，合并单元格 内含demo，可根据需求修改 声明:此为开源代码，经本人二次整合，如有侵权请联系管理员删除。
winform使用Microsoft.Office.Interop.Excel读取带有合并单元格的Excel的demo，Excel版本不限，可以是.xls可以是.xlsx版本。本程序采用webbrowser显示读取的数据，使用bootstrap的css样式美化table表格，使用Json...
利用js合并table相同内容单元格并js方式自动生成，把文本内容复制进js中，应该就知道大概咋用了
用JS动态合并单元格算法，利用一个结果集List来生成，数据过多会加重客户断负担 --%> ${status.index>=tempEnd}"> <c:set var="rowspanCount" value="0"></c:set>清楚历史数据 --%> ${list}" varStatus="status2...
java poi 填充word（合并单元格，添加图片，设置字号）（csdn）————程序
很不错的vc对word操作代码，可以自动生成word表格，并导入数据、合并单元格、编辑眉页等。
Aspx上传Excel并将Excel工作表名称读出生成菜单，表格内容作为实体数据，读出的工作表包含合并单元格的内容。
VB创建Excel表格,合并单元格,生成图形等操作.pdf
主要给大家介绍了关于java实现合并单元格的同时并导出excel的相关资料，文中先进行了简单的介绍，之后给出了详细的示例代码，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
利用vc创建excel2003表格，字体、背景、边框、合并单元格
word-export ...1.SpringBoot + poi-tl 根据word模板动态生成word（文本、动态行表格、循环列表下的动态行表格、合并单元格） 2.SpringBoot + easypoi 根据word模板动态生成word（文本、表格、图片）
NULL 博文链接：https://x125858805.iteye.com/blog/2239773