<!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>

今天看到一个博客,觉得里面代码跟想法不错,故将dsna的代码保留在这里,谢谢!

JS自动合并表格的更多相关文章

  1. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  2. poi生成表格自动合并单元格

    直接复制这个工具类即可使用: /** * 合并单元格 * @author tongyao * @param sheet sheet页 * @param titleColumn 标题占用行 * @par ...

  3. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  4. Javascript合并表格相同内容单元格示例

    效果图: HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  5. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  6. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  7. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...

  8. CSS 和 JS 文件合并工具

    写 CSS 和 JavaScript 的时候, 我们会遇到一个两难的局面: 要么将代码写在一个大文件, 要么将代码分成多个文件. 前者导致文件难以管理, 代码复用性差, 后者则因为需要在载入多个文件令 ...

  9. CSS Sprite小图片自动合并工具

    css-sprite是将css样式中零星的小图标,小图片合并成大图显示,这样能减小服务器并发连接数,减小服务器负载和带宽使用,有很高的实用价值.这里介绍一些自动合并图片并生成样式的工具. NodeJS ...

随机推荐

  1. [转]ASP.NET MVC 入门7、Hellper与数据的提交与绑定

    ASP.NET MVC提供了很多Hellper的方法,Hellper就是一些生成HTML代码的方法,方便我们书写HTML代码(有一部分的朋友更喜欢直接写HTML代码).我们也可以利用.NET 3.5的 ...

  2. selenium2.0的初步封装(java版本)

    我们都知道, 在本地创建java项目后,引入selenium-java-2.35.0.jar   selenium-support-2.35.0.jar junit-4.8.1.jar等等jar包之后 ...

  3. [新]最近用unity5弄的一些渲染

    Unity Separable Bokeh Depth-of-Field Hexagonal Blur Unity3d Realtime Dynamic Clouds Rendering hemisp ...

  4. Windows下部署Git Server端

    解决方案一: (注意:如果英文阅读没太大障碍,直接到Bonobo官网看相关文档即可.) win7(windows server 2008应该也可以,没测试过)+ IIS7.5(win7自带的)+ Gi ...

  5. poj 2892 Tunnel Warfare(线段树)

    Tunnel Warfare Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 7499   Accepted: 3096 D ...

  6. 决策树及其python实现

    剪枝 由于悲观错误剪枝 PEP (Pessimistic Error Pruning).代价-复杂度剪枝 CCP (Cost-Complexity Pruning).基于错误剪枝 EBP (Error ...

  7. Ubuntu14.04安装Oracle12C

    原文:http://www.techienote.com/2014/04/how-to-install-oracle-12c-enterprise-edition-database-ubuntu-13 ...

  8. ACM2032

    杨辉三角 Problem Description 还记得中学时候学过的杨辉三角吗?具体的定义这里不再描述,你可以参考以下的图形:11 11 2 11 3 3 11 4 6 4 11 5 10 10 5 ...

  9. Spring笔记(二)Core层

    Spring用一种非入侵的方式来管理程序,模块结构图如下:   .Core层 IOC(控制反转):应用本身程序不负责依赖对象的创建及维护,依赖对象的创建及维护有外设容器负责,即:IOC: DI(依赖注 ...

  10. Yii目录树扩展ztree,ctree等

    ztree: http://blog.csdn.net/jake451/article/details/7091449 http://hi.baidu.com/qiangtan/item/e85c48 ...