动态生成包含合并单元格的表格

最新推荐文章于 2021-07-16 15:27:41 发布
最新推荐文章于 2021-07-16 15:27:41 发布
阅读量240 收藏
点赞数
分类专栏： js 文章标签： 项目管理 JavaScript J# 网页游戏 资讯 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinkong1010/article/details/83701365
版权
<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";

来删除多余的列
xinkong1010
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 实现 动态生成包含合并单元格的表格
03-31
js 实现 动态生成包含合并单元格的表格! 值得下载看看!资源免费,大家分享!!
神魔对决2-天上的激战
04-29
纯js网页大型游戏:《神魔对决2-天上的激战》(3.8M)，开源发布
利用JavaScript动态构建table行 并实现合并单元格效果
chouxiangs995497的博客
07-11 283
实现效果图： 代码： $(function(){ $.getJSON( "/homeofcar/user/getjson", function(data) { var list = data...
关于table动态添加数据 单元格合并 数组合并
weixin_30372371的博客
03-16 155
var newArr = [ {"BranchID":1,"BranchName":"城二","BranchFullName":"城二分公司","IssueTypeID":101,"IssueTypeName":"宏蜂窝连片弱覆盖","Total":242,"WithoutDemand":139,"WithDemand":103}, {"BranchID":2,"BranchName":"城...
js往表格添加信息
zy991009的博客
04-26 1490
&lt;fieldset&gt;  &lt;legend&gt;添加学生信息&lt;/legend&gt;  &lt;form action=""&gt;  &lt;div class="luru"&gt;    姓名：&lt;input type="text" id="stuname" /&gt;  &lt;/div&amp
java 后端生成pdf模板合并单元格表格的案例.docx
01-13
java 后端生成pdf模板合并单元格表格的案例.docx
vue+elementUI实现动态表格合并单元格.zip
09-26
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
JS实现动态修改table及合并单元格的方法示例
10-20
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
word NPOI合并单元格示例
07-21
在Word处理方面，NPOI提供了IWdDocument接口，通过这个接口我们可以对Word文档进行各种操作，包括合并单元格。 首先，我们需要引入NPOI相关的NuGet包，如`NPOI`和`NPOI.HPSF`。安装后，我们就可以在项目中使用NPOI...
js(HTML RPG WEBGAME,纯网页游戏,完整版
08-02
神魔对决2-天上的激战 (HTML RPG WEBGAME,纯网页游戏,完整版,历时1个月,个人制作,原作:风云舞)
js动态合并单元格
weixin_45411740的博客
07-16 1814
前几天做网页的时候涉及到动态合并单元格的问题，经过一番努力终于是做好了，所以现在把代 码贴出来。 首先说一下我们要实现的效果原图是这样的 然后我们要实现的效果是这样的 而且呢表格的生成是发送ajax请求后后端传过来的数据通过for循环动态生成的，下面贴代 html代码如下 <thead> <tr> <th>站点</th> <th>车道</th> <th>时间&l...
使用JavaScript实现动态创建含合并单元格（行）的表单
热门推荐
肖永威的专栏
04-29 1万+
在HTML DOM中，Table中的行数据是可以通过JavaScript的函数方法insertRow(index)动态增加的，通过insertCell(index)增加单元格。 其中，比较麻烦的是合并单元格，这里以行合并为例，使用rowspan属性的设置来实现，关键点是insertRow(index)和insertCell(index)中index值，也就是合并单元格的时候，index顺序发生的变化。
js动态生成合并单元格的表格
xinkong1010的专栏
11-18 342
标题页 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 ...
去重
xiele8的专栏
03-19 530
http://topic.csdn.net/u/20090520/10/8709aca9-40f5-40ef-9b41-6886ee9223e2.html 要求：必须要正则表达式来实现 再强调，不要循环，尽量用正则表达式。 楼主要求不清晰？？ 正则玩不转，等高人   对我有用[0]丢个板砖[0]引用举报管理TOP 精华推荐：[
Java POI动态生成包含合并单元格的Excel
SeptDays的博客
12-28 1304
主要是根据poi包中的CellRangeAddress来使用 现在需求是：根据一对多的两表关系生成一个带合并单元格的Excel，使两表在Excel里的数据表现形式也是一对多 类似于这种 解决方案，搜索了半天也只有添加CellRangeAddress这方法，只要计算好起始和终止的行号列号还是可以用的。因为其是直接添加到sheet类里，另外生成的合并单元格似乎也能自动把相同数据的单元格处理...
vue拖拉拽动态表单（转）
doasmaster的博客
05-31 856
jquery/Bootstrap表单动态拖拉拽添加 先分享代码了 ，原理可以看上面jquery的原理，差不多的。 <template> <div class="box"> <h4>这是发布页面</h4> <el-row :gutter="10"> <el-col :span="8"> <div class="grid-content bg-purple-light"&gt...
thymeleaf 生成动态合并单元格
最新发布
05-05
2. 在生成表格时，按照上一步生成的合并单元格列表进行单元格合并操作。 具体实现可以参考以下代码： ```html , rowStat : ${data}"> ${rowStat.index + 1}"> ${row.name}"> ${row.age}"> ${row.sex}"> ${...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值