mengshuangcom
- 浏览: 141820 次
- 性别:
- 来自: 深圳
-
文章分类
- 全部博客 (119)
- ibatis (7)
- oracle (14)
- struts (4)
- js (11)
- web (6)
- java基础 (16)
- jstl (1)
- use (2)
- log4J (1)
- Json (2)
- jxl (5)
- server (1)
- spring (4)
- jquery (8)
- struts2 (1)
- AjaxAnywhere (1)
- extjs (1)
- hibernate (1)
- other (3)
- tld (1)
- jms (2)
- lib (0)
- 应用 (1)
- web前端 (2)
- linux (2)
- jvm (9)
- 缓存 (1)
- spring mvc (1)
- ftp (1)
- ide (1)
最新评论
数据是动态生成的。如：
姓名 性别 年龄 科目 分数
张三 男 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 精华推荐：使用CSS3 and jQuery 实现霓虹灯闪烁效果
liw
(微微)
等 级：
#3楼 得分：0回复于：2009-03-06 09:15:53要求达到的效果是：
姓名 性别 年龄 科目 分数
数学 90
张三 男 22 语文 70
英语 60
李四 女 19 数学 60
语文 60
王五 男 20 英语 60
姓名列的合并如上面的代码已经实现，但性别和年龄列没搞定，谢谢
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 精华推荐：网站终于被搜索引擎收录了，总结一下我的seo经验。
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 精华推荐：“如何将16进制码流在html中显示为图片”兼容多个浏览器的方案。
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 精华推荐：【分享】深入挖掘document.getElementsByTagName()方法的返回值
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列里只要是相同的数据就合并单元格
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";
来删除多余的列
姓名 性别 年龄 科目 分数
张三 男 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 精华推荐：使用CSS3 and jQuery 实现霓虹灯闪烁效果
liw
(微微)
等 级：
#3楼 得分：0回复于：2009-03-06 09:15:53要求达到的效果是：
姓名 性别 年龄 科目 分数
数学 90
张三 男 22 语文 70
英语 60
李四 女 19 数学 60
语文 60
王五 男 20 英语 60
姓名列的合并如上面的代码已经实现，但性别和年龄列没搞定，谢谢
对我有用[0] 丢个板砖[0] 引用 举报 管理 TOP 精华推荐：网站终于被搜索引擎收录了，总结一下我的seo经验。
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 精华推荐：“如何将16进制码流在html中显示为图片”兼容多个浏览器的方案。
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 精华推荐：【分享】深入挖掘document.getElementsByTagName()方法的返回值
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列里只要是相同的数据就合并单元格
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中英文字符串相关操作
2011-09-05 22:34 1040一、判断是否中英文 <script language=& ... -
JS表格排序
2011-05-18 17:39 644自写的JS表格排序，目前仅支持数字排序，其他的可以扩展sort ... -
js 常识
2011-04-02 15:42 7101.document.write(""); ... -
js正则表达式
2011-03-14 13:25 722JS的正则表达式//校验是否全由数字组成 function ... -
js中for in的用法
2011-02-21 15:22 852在js中for in的用法 for(var i=0;i& ... -
showModel的使用体会
2010-12-21 11:30 1192ShowModalDialog函数的功 ... -
js 判断时间格式
2010-08-26 23:49 12102.1 短时间，形如 (13:04:06) ... -
textarea控制字数js
2010-08-26 23:48 689onkeypress='if (this.value.leng ... -
JS计算两日期时间差
2010-08-15 16:18 2309/** * 字符串传Date * @param { ... -
js 验证表单
2010-08-08 21:37 400<script language="javas ...
相关推荐
js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格js合并单元格
js 合并单元格 只有一个方法 思路清晰 可直接使用 注：此方法为合并某一列的单元格 若合并其他 可在吃方法基础上修改
demo实例 合并紧挨着的 单元格 通过js实现 希望对大家有帮助
jquery datatable 单元格合并，通过js实现相同内容单元格动态合并！！！jquery datatable 单元格合并，通过js实现相同内容单元格动态合并！！！
js导出execl，自动合并单元格，自动增行，增列
vue-easytable合并单元格，文档包括ftl文件及对应的js
主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下
winform使用Microsoft.Office.Interop.Excel读取带有合并单元格的Excel的demo，Excel版本不限，可以是.xls可以是.xlsx版本。本程序采用webbrowser显示读取的数据，使用bootstrap的css样式美化table表格，使用Json...
本js脚本完美的实现了table单元格的合并，合并后犹如交叉表的形式，非常完美，并在其中附带例子可以验证。
带富文本编辑器以及支持表格操作，可拉伸单元格宽度、增加行、增加列、合并单元格
合并单元格好JS，特别适用与动态生成表格的单元格合并，报表开发
演示单元table的合并操作，同时也给出了操作table的解决方案，使用原理。麻雀虽小，五脏俱全。
html直接看效果 只要输入table的id，就可以自动合并单元格，只要上下相邻的单元格相同的，都会合并
只要输入table的id，就可以自动合并单元格，只要上下相邻的单元格相同的，都会合并 html版比较好，点下面的 http://download.csdn.net/source/1276574
JSP页面实现合并单元格，在js中写入，jsp中可以调用此js。
仿Excel合并单元格实例点击合并表格单元格是合并表格里面相同的列，很实用的。
前端导出excel，可以控制样式，单元格合并居中等
通过jQuery简单实现的一个合并单元格功能
spreadjs_包含合并单元格的数据绑定-demo