<!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. 尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行，将出现此问题。

    从10G开始,Oracle提供了一个较为轻量级的客户包,叫做Instant Client. 将它安装好后,就不用再安装庞大的Oracle Client了. 这样一来,只要客户端下载Instant Cl ...

  2. 使用opencv统计视频库的总时长

    统计视频库里的视频文件的总时长 废话不多说,直接上代码: /* * ================================================================== ...

  3. The Shortest Path in Nya Graph

    Problem Description This is a very easy problem, your task is just calculate el camino mas corto en ...

  4. 关于Windows Azure的常见问题-执行与维护FAQ

    执行与维护 使用虚拟机运行业务应用有什么需要注意的地方? Windows Azure 会周期性地更新主机环境,以确保平台上运行的所有应用程序和虚拟机始终处于安全的环境.此更新过程可能会导致您的虚拟机重 ...

  5. puppet运维配置实列

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABQkAAAGBCAIAAABKMKAEAAAgAElEQVR4nOydeXwU9cH/t2o9WutR+7

  6. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  7. 微信开发第8章 通过accesstoken将长连接转换为短链接

    业务场景:开发的过程中经常会有一些很长的链接,这个时候如果生成二维码,会导致扫码的过程中识别比较慢,如果存入数据库,会导致数据库的字段长度要设定的很长才行,所以把长连接转换为短链接就越来越重要了. 接 ...

  8. HDU 1518 Square

    解题思路:sum%4!=0    , max<sum/4 #include<iostream>#include<cstdio>#include<cstring> ...

  9. java程序员菜鸟进阶（十五）linux基础入门（三）linux用户和组管理

    我们大家都知道,要登录linux操作系统,我们必须要有一个用户名和密码.每一个用户都由一个惟一的身份来标识,这个标识叫做用户ID.系统中的每一个用户也至少需要属于一个"用户分组". ...

  10. 杀死当前Excel进程

    说明: 代码编写过程中,有时需要杀死当前Excel进程,而不影响其他Excel进程. 代码如下: 添加引用: //杀死当前进程的API引用 using System.Runtime.InteropSe ...