jquery合并表格中相同文本的相邻单元格


Posted in Javascript onJuly 17, 2015

一、效果

jquery合并表格中相同文本的相邻单元格

二、代码

<!DOCTYPE HTML>
<html>
<head>
  <title>Example</title>
  <meta charset="utf-8"/>
  <style></style>
  <script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
  <table id="process" cellpadding="2" cellspacing="0" border="1">
    <thead>
      <tr >
        <td>col0</td>
        <td>col1</td>
        <td>col2</td>
        <td>col3</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>SuZhou</td>
        <td>11111</td>
        <td>22222</td>
        <td>SuZhouCity</td>
      </tr>
      <tr>
        <td>SuZhou</td>
        <td>33333</td>
        <td>44444</td>
        <td>SuZhouCity</td>
      </tr>
      <tr>
        <td>SuZhou</td>
        <td>55555</td>
        <td>66666</td>
        <td>SuZhouCity</td>
      </tr>
      <tr>
        <td>ShangHai</td>
        <td>77777</td>
        <td>88888</td>
        <td>ShangHaiCity</td>
      </tr>
      <tr>
        <td>ShangHai</td>
        <td>uuuuu</td>
        <td>hhhhh</td>
        <td>ShangHaiCity</td>
      </tr>
      <tr>
        <td>ShangHai</td>
        <td>ggggg</td>
        <td>ccccc</td>
        <td>ShangHaiCity</td>
      </tr>
      <tr>
        <td>GuangZhou</td>
        <td>ttttt</td>
        <td>eeeee</td>
        <td>GuangZhouCity</td>
      </tr>
      <tr>
        <td>GuangZhou</td>
        <td>ppppp</td>
        <td>qqqqq</td>
        <td>GuangZhouCity</td>
      </tr>
    </tbody>
  </table>

  <script type="text/javascript">
//函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格
//参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data 
//参数说明:_w_table_colnum 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。
function _w_table_rowspan(_w_table_id,_w_table_colnum){
  _w_table_firsttd = "";
  _w_table_currenttd = "";
  _w_table_SpanNum = 0;
  _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
  _w_table_Obj.each(function(i){
    if(i==0){
      _w_table_firsttd = $(this);
      _w_table_SpanNum = 1;
    }else{
      _w_table_currenttd = $(this);
      if(_w_table_firsttd.text()==_w_table_currenttd.text()){
        _w_table_SpanNum++;
        _w_table_currenttd.hide(); //remove();
        _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
      }else{
        _w_table_firsttd = $(this);
        _w_table_SpanNum = 1;
      }
    }
  }); 
}
//函数说明:合并指定表格(表格id为_w_table_id)指定行(行数为_w_table_rownum)的相同文本的相邻单元格
//参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data 
//参数说明:_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。
//     如果为数字,则从最左边第一行为1开始算起。
//     "even" 表示偶数行
//     "odd" 表示奇数行
//     "3n+1" 表示的行数为1、4、7、10.......
//参数说明:_w_table_maxcolnum 为指定行中单元格对应的最大列数,列数大于这个数值的单元格将不进行比较合并。
//     此参数可以为空,为空则指定行的所有单元格要进行比较合并。
function _w_table_colspan(_w_table_id,_w_table_rownum,_w_table_maxcolnum){
  if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=0;}
  _w_table_firsttd = "";
  _w_table_currenttd = "";
  _w_table_SpanNum = 0;
  $(_w_table_id + " tr:nth-child(" + _w_table_rownum + ")").each(function(i){
    _w_table_Obj = $(this).children();
    _w_table_Obj.each(function(i){
      if(i==0){
        _w_table_firsttd = $(this);
        _w_table_SpanNum = 1;
      }else if((_w_table_maxcolnum>0)&&(i>_w_table_maxcolnum)){
        return "";
      }else{
        _w_table_currenttd = $(this);
        if(_w_table_firsttd.text()==_w_table_currenttd.text()){
          _w_table_SpanNum++;
          _w_table_currenttd.hide(); //remove();
          _w_table_firsttd.attr("colSpan",_w_table_SpanNum);
        }else{
          _w_table_firsttd = $(this);
          _w_table_SpanNum = 1;
        }
      }
    });
  });
}
$(document).ready(function(){ 
 // _w_table_rowspan("#process",4);
 // _w_table_rowspan("#process",3);
 // _w_table_rowspan("#process",2);
 _w_table_rowspan("#process",1);
 });
  </script>
</body>
</html>

测试使用了一下,很赞!

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
用js实现下载远程文件并保存在本地的脚本
May 06 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
利用JavaScript的%做隔行换色的实例
Nov 25 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
用svg制作富有动态的tooltip
Jul 17 #Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 #Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 #Javascript
JS判断页面是否出现滚动条的方法
Jul 17 #Javascript
javascript图片预加载实例分析
Jul 16 #Javascript
javascript的BOM汇总
Jul 16 #Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 #Javascript
You might like
PHP原理之异常机制深入分析
2010/08/08 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
常见的PHP五种设计模式小结
2011/03/23 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
关于jQuery UI 使用心得及技巧
2012/10/10 Javascript
javascript替换已有元素replaceChild()使用介绍
2014/04/03 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
2020/01/02 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
详解Python的Django框架中的模版继承
2015/07/16 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
《最大的“书”》教学反思
2014/02/14 职场文书
化妆品店促销方案
2014/02/24 职场文书
寄语是什么意思
2014/04/10 职场文书
村党支部换届选举方案
2014/05/02 职场文书
物业管理专业自荐信
2014/07/01 职场文书
上党课的心得体会
2014/09/02 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL