js合并单元格.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>JS合并表格</title>
<style>
* {
font-size:12px
}
table{ margin-top:5px;}
.table1 {
border-collapse:collapse;
width:600px;
border:1px solid #7A90A8;
border-top:3px;
}
td {
padding-left:3px;
text-align:left;
}
caption{
background:#9DACBF;
font-weight:600;
padding:4px;
color:#FFF; }
</style>
</head>
<body>
<table id="ii" class="table1" border="1" align="center">
<caption>2010年北京市医院分布情况</caption>
<tr>
<td>所在区</td>
<td>二级医院数量</td>
<td>三级医院数量</td>
<td>三甲级医院数量</td>
<td>四级医院数量</td>
</tr>
<tr>
<td>海淀区</td>
<td>8</td>
<td>54</td>
<td>14</td>
<td>8</td>
</tr>
<tr>
<td>海淀区</td>
<td>15</td>
<td>64</td>
<td>36</td>
<td>76</td>
</tr>
<tr>
<td>朝阳区</td>
<td>5</td>
<td>64</td>
<td>69</td>
<td>23</td>
</tr>
<tr>
<td>朝阳区</td>
<td>17</td>
<td>54</td>
<td>43</td>
<td>18</td>
</tr>
<tr>
<td>朝阳区</td>
<td>73</td>
<td>35</td>
<td>45</td>
<td>72</td>
</tr>
</table>
<script type="text/javascript">
function tableSpan(tb1)
{
//合并行
//列
for(var i=tb1.rows[0].childNodes.length-1;i>=0;i--)
{
//行
for(var j=tb1.rows.length-1;j>0;j--)
{
//当前单元格与上一单元格比较
if(tb1.rows[j].childNodes[i].innerHTML==tb1.rows[j-1].childNodes[i].innerHTML)
{
tb1.rows[j-1].childNodes[i].rowSpan += tb1.rows[j].childNodes[i].rowSpan;
tb1.rows[j].removeChild(tb1.rows[j].childNodes[i]);
}
}
}
//合并列
//行
for(var i=tb1.rows.length-1;i>=0;i--)
{ break;//不合并列
//列
for(var j=tb1.rows[i].childNodes.length-1;j>0;j--)
{
//当前单元格与左一单元格比较
if(tb1.rows[i].childNodes[j].innerHTML==tb1.rows[i].childNodes[j-1].innerHTML)
{
tb1.rows[i].childNodes[j-1].colSpan += tb1.rows[i].childNodes[j].colSpan;
tb1.rows[i].removeChild(tb1.rows[i].childNodes[j]);
}
}
}
}
tableSpan(ii);
</script>
</body>
</html>
合并效果,将所在区相邻且字符同的都合并了
2010年北京市医院分布情况
所在区 |
二级医院数量 |
三级医院数量 |
三甲级医院数量 |
四级医院数量 |
海淀区 |
8 |
54 |
14 |
8 |
15 |
64 |
36 |
76 |
朝阳区 |
5 |
69 |
23 |
17 |
54 |
43 |
18 |
73 |
35 |
45 |
72 |
分享到:
相关推荐
类功能描述:该插件生成一个具有行合并的列表数据,合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可,无需后端二次处理数据。 该类以纯原生JS编写,无需引入任何第三方库。 调用方法:...
Table相同行的单元格自动合并,使用js来实现此效果,具体代码下,感兴趣的朋友可以参考下
日常开发中,经常遇到表格里需要自动合并单元格,考虑到写服务器控件比较消耗性能,因些还是把这种工作交给客户端Javascript去做吧,基于习惯用jquery框架,所以封装了一个Jquery插件。
利用js合并table相同内容单元格并js方式自动生成,把文本内容复制进js中,应该就知道大概咋用了
动态生成表格,并自动合并相同单元格插件,可在bootstrapTable子表使用
带富文本编辑器以及支持表格操作,可拉伸单元格宽度、增加行、增加列、合并单元格
LayUiTable表单相同参数的单元格合并,可以几个列一起合并,注释相应完善。LayUiTable表单相同参数的单元格合并
ant-design-vue + VUE3,在table中按照某一列名进行排序并将内容相同的列合并; 包含原table数据排序,重组,行合并
SheetJS免费版的不支持格式,比如居中、自动换行都不行。xlsx-style是SheetJS的一个分支,且支持各种格式,可以做到文字居中,自动换行,列宽设置,单元格合并,冻结表头等。
Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript ...
本程序采用webbrowser显示读取的数据,使用bootstrap的css样式美化table表格,使用Json传递实数据,现窗体间的数据传递。通过该程序,您可以学到如下知识点: 特别声明:本程序只给出了导入的实例,导出的实例只给出...
前端:Vue/JSP/React/HTML+JS+CSS/ASP 后台框架代码:java/c/c++/php/VB/lun/Andorid/Python 开发环境:idea 数据库:MySql(建议用 5.7,8.0 有时候会有坑) 部署环境:Tomcat(建议用 7.x 或者 8.x b版本),maven
前端:Vue/JSP/React/HTML+JS+CSS/ASP 后台框架代码:java/c/c++/php/VB/lun/Andorid/Python 开发环境:idea 数据库:MySql(建议用 5.7,8.0 有时候会有坑) 部署环境:Tomcat(建议用 7.x 或者 8.x b版本),maven
asp.net 导入excel时,处理合并表头、复杂表头、多行表头 1.解决复杂表头的Excel导入。可以解决任何复杂的表头。 2.导入时,显示请稍后。。。提醒框,完毕后会自动隐藏 3.全面扫描Excel数据,将所有异常详细信息写入...
1.表格的宽度以及表格每一列的宽度需要固定(特殊情况除外:当表格列数少并且表格总宽度明显小于表格父容器的宽度时,也就是表格列不存在自动换行的问题) 2.表格父容器尺寸大小改变时,需要调用 setBoxSize 方法,...
9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的...
一款纯前端类似excel的在线表格,功能强大、配置简单、完整源码。 特性 格式设置:样式,条件格式,文本对齐及旋转,文本截断、溢出、自动换行,多种数据类型,单元格内多样式 单元格:拖拽,下拉填充,多选区,...
9.22 动态生成包含合并单元格的表格 9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的...
1.表格的宽度以及表格每一列的宽度需要固定(特殊情况除外:当表格列数少并且表格总宽度明显小于表格父容器的宽度时,也就是表格列不存在自动换行的问题) 2.表格父容器尺寸大小改变时,需要调用 setBoxSize 方法,...
有朋友问GridView控件对于跨行合并的问题,这可以用控件嵌套来完成,当然,我更喜欢在前台来用JS来控制网页元素的样式,而后台仅仅是根据客户的请求,来返回数据。