首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery实现合并表格单元格中相同行操作示例

Posted in jQuery onJanuary 28, 2019

本文实例讲述了jQuery实现合并表格单元格中相同行操作。分享给大家供大家参考，具体如下：

合并的方法

$("#tableid").mergeCell({
cols:[X,X] ///参数为要合并的列
})
/**
* 操作表格 合并单元格 行
* 2016年12月13日16:00:41
*/
(function($) {
  // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件
  // 才保留了jQuery.prototype这个形式
  $.fn.mergeCell = function(options) {
    return this.each(function() {
      var cols = options.cols;
      for ( var i = cols.length - 1; cols[i] != undefined; i--) {
       // fixbug console调试
       // console.debug(cols[i]);
       mergeCell($(this), cols[i]);
      }
      dispose($(this));
    });
  };
  // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
  // 具体可以参考本人前一篇随笔里介绍的那本书
  function mergeCell($table, colIndex) {
    $table.data('col-content', ''); // 存放单元格内容
    $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
    $table.data('col-td', $());   // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
    $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
    // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
    $('tbody tr', $table).each(function(index) {
      // td:eq中的colIndex即列索引
      var $td = $('td:eq(' + colIndex + ')', this);
      // 取出单元格的当前内容
      var currentContent = $td.html();
      // 第一次时走此分支
      if ($table.data('col-content') == '') {
        $table.data('col-content', currentContent);
        $table.data('col-td', $td);
      } else {
        // 上一行与当前行内容相同
        if ($table.data('col-content') == currentContent) {
          // 上一行与当前行内容相同则col-rowspan累加, 保存新值
          var rowspan = $table.data('col-rowspan') + 1;
          $table.data('col-rowspan', rowspan);
          // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
          $td.hide();
          // 最后一行的情况比较特殊一点
          // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
          if (++index == $table.data('trNum'))
            $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
        } else { // 上一行与当前行内容不同
          // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
          if ($table.data('col-rowspan') != 1) {
            $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
          }
          // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
          $table.data('col-td', $td);
          $table.data('col-content', $td.html());
          $table.data('col-rowspan', 1);
        }
      }
    });
  }
  // 同样是个private函数 清理内存之用
  function dispose($table) {
    $table.removeData();
  }
})(jQuery);

示例html代码

<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>酒店分房表</title>
<style mce_bogus="1" type="text/css">
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tfoot, thead, th, s { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; font-style:normal; text-decoration:none;word-wrap: break-word;}
body {font-family: SimSun;
   font-style:italic;
   font-weight:bold;
   font-size:12px;
       background:none;margin-left: auto;margin-right: auto;}
a { color:#000000; font-size:14px;line-height:26px; font-family:SimSun; text-decoration:none; }
a:hover { color:#000000; font-size:14px; line-height:26px; font-family:SimSun; text-decoration:none;}
.bt{color: #121212;font-size: 26px; line-height:80px;text-align: center;}
.A4 { margin:auto;width: 780px;}
.title {
  color: #0070C0;
}
</style>
</head>
<body>
 <div class="A4">
   <br/><br/>
   <div align="center">
     <h1><strong style="font-size: 24;">酒店信息和分房表</strong></h1>
     <br/><br/>
   </div>
   <table width="780" border="1" cellspacing="0" cellpadding="20" style="table-layout:fixed; word-break:break-strict;repeat-header:yes;repeat-footer:yes;">
     <tr>
      <td width="140" align="center"><b>居住城市</b></td>
      <td width="120" align="center"><b>入住日期</b></td>
      <td width="120" align="center"><b>离店日期</b></td>
      <td width="200" align="center"><b>酒店名称</b></td>
      <td width="200" align="center"><b>地址</b></td>
     </tr>
        <tbody>
      <tr>
        <td align="center"></td>
        <td align="center">2016-12-11</td>
        <td align="center"> 2016-12-12</td>
        <td align="center"> 性格里拉</td>
        <td align="center"> 上海</td>
      </tr>
     </tbody>
   </table>
   <br/><br/>
    <table width="780" border="1" cellspacing="0" cellpadding="20" style="table-layout:fixed; word-break:break-strict;repeat-header:yes;repeat-footer:yes;">
     <tr>
      <td width="140" align="center"><b>房间类型</b></td>
      <td width="120" align="center"><b>双床房</b></td>
     </tr>
     <tbody>
      <tr>
        <td align="center"><b>数量共计： 5 间</b></td>
        <td align="center">5</td>
      </tr>
     </tbody>
   </table>
   <br/><br/>
   <table id="table_4" width="780" border="1" cellspacing="0" cellpadding="0" style="table-layout:fixed; word-break:break-strict;repeat-header:yes;repeat-footer:yes;">
     <tr>
      <td width="50" align="center"><b>Room</b></td>
      <td width="50" align="center"><b>Adult</b></td>
      <td width="120" align="center"><b>中文名</b></td>
      <td width="200" align="center"><b>Name</b></td>
      <td width="50" align="center"><b>Sex</b></td>
      <td width="200" align="center"><b>Room Type</b></td>
     </tr>
      <tr>
        <td align="center">1</td>
        <td align="center">1</td>
        <td align="center"> 熊哥1</td>
        <td align="center"> xsw </td>
        <td align="center"> 女</td>
        <td align="center"> 双床房1</td>
      </tr>
      <tr>
        <td align="center">1</td>
        <td align="center">2</td>
        <td align="center"> 熊哥2</td>
        <td align="center"> xsw2222222 </td>
        <td align="center"> 男</td>
        <td align="center"> 双床房1</td>
      </tr>
      <tr>
        <td align="center">1</td>
        <td align="center">3</td>
        <td align="center"> 杰森.斯坦森</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房1</td>
      </tr>
      <tr>
        <td align="center">2</td>
        <td align="center">4</td>
        <td align="center"> 李锡龄</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房2</td>
      </tr>
      <tr>
        <td align="center">2</td>
        <td align="center">5</td>
        <td align="center"> 李孝利</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房2</td>
      </tr>
      <tr>
        <td align="center">2</td>
        <td align="center">6</td>
        <td align="center"> 刘德国</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房2</td>
      </tr>
      <tr>
        <td align="center">3</td>
        <td align="center">7</td>
        <td align="center"> 杰森.四米</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房3</td>
      </tr>
      <tr>
        <td align="center">3</td>
        <td align="center">8</td>
        <td align="center"> 凯威.斯坦森</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房3</td>
      </tr>
      <tr>
        <td align="center">3</td>
        <td align="center">9</td>
        <td align="center"> 杰森史蒂文</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房3</td>
      </tr>
      <tr>
        <td align="center">4</td>
        <td align="center">10</td>
        <td align="center"> 5</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房4</td>
      </tr>
      <tr>
        <td align="center">4</td>
        <td align="center">11</td>
        <td align="center"> 3</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房4</td>
      </tr>
      <tr>
        <td align="center">4</td>
        <td align="center">12</td>
        <td align="center"> 1</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房4</td>
      </tr>
      <tr>
        <td align="center">4</td>
        <td align="center">13</td>
        <td align="center"> 杰森.托马鞍山</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房4</td>
      </tr>
      <tr>
        <td align="center">5</td>
        <td align="center">14</td>
        <td align="center"> 孙露</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房5</td>
      </tr>
      <tr>
        <td align="center">5</td>
        <td align="center">15</td>
        <td align="center"> 李红梅</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房5</td>
      </tr>
      <tr>
        <td align="center">5</td>
        <td align="center">16</td>
        <td align="center"> 卓越杀</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房5</td>
      </tr>
      <tr>
        <td align="center">5</td>
        <td align="center">17</td>
        <td align="center"> 4</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房5</td>
      </tr>
      <tr>
        <td align="center">5</td>
        <td align="center">18</td>
        <td align="center"> 12</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房5</td>
      </tr>
      <tr>
        <td align="center">5</td>
        <td align="center">19</td>
        <td align="center"> 16</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房5</td>
      </tr>
   </table>
   <br/><br/>
 </div>
 </body>
 <script type="text/javascript">
 /**
 * 操作表格 合并单元格 行
 * 2016年12月13日16:00:41
 */
(function($) {
  // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件
  // 才保留了jQuery.prototype这个形式
  $.fn.mergeCell = function(options) {
    return this.each(function() {
      var cols = options.cols;
      for ( var i = cols.length - 1; cols[i] != undefined; i--) {
       // fixbug console调试
       // console.debug(cols[i]);
       mergeCell($(this), cols[i]);
      }
      dispose($(this));
    });
  };
  // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
  // 具体可以参考本人前一篇随笔里介绍的那本书
  function mergeCell($table, colIndex) {
    $table.data('col-content', ''); // 存放单元格内容
    $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
    $table.data('col-td', $());   // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
    $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
    // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
    $('tbody tr', $table).each(function(index) {
      // td:eq中的colIndex即列索引
      var $td = $('td:eq(' + colIndex + ')', this);
      // 取出单元格的当前内容
      var currentContent = $td.html();
      // 第一次时走此分支
      if ($table.data('col-content') == '') {
        $table.data('col-content', currentContent);
        $table.data('col-td', $td);
      } else {
        // 上一行与当前行内容相同
        if ($table.data('col-content') == currentContent) {
          // 上一行与当前行内容相同则col-rowspan累加, 保存新值
          var rowspan = $table.data('col-rowspan') + 1;
          $table.data('col-rowspan', rowspan);
          // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
          $td.hide();
          // 最后一行的情况比较特殊一点
          // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
          if (++index == $table.data('trNum'))
            $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
        } else { // 上一行与当前行内容不同
          // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
          if ($table.data('col-rowspan') != 1) {
            $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
          }
          // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
          $table.data('col-td', $td);
          $table.data('col-content', $td.html());
          $table.data('col-rowspan', 1);
        }
      }
    });
  }
  // 同样是个private函数 清理内存之用
  function dispose($table) {
    $table.removeData();
  }
})(jQuery);
 $('#table_4').mergeCell({
    cols:[0,5]
  });
 </script>
</html>

运行结果：

jQuery实现合并表格单元格中相同行操作示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery实现合并表格单元格中相同行操作示例

- Author -

熊哥club

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 #jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 #jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 #jQuery
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 #jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 #jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 #jQuery
Jquery的Ajax技术使用方法
Jan 21 #jQuery
Yolov5(1) 自定义组件(1) Storage(1) Vue(10) vue-router-link(1) TimePickerView(1) 本地化存储(1) click(1) Jmerte(1) KVM(1)
You might like
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
js活用事件触发对象动作
2008/08/10 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
13个PHP函数超实用
2015/10/21 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
详解Vue.js 作用域、slot用法（单个slot、具名slot）
2019/10/15 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
使用python加密自己的密码
2015/08/04 Python
Python实现HTTP协议下的文件下载方法总结
2016/04/20 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
python打印异常信息的两种实现方式
2019/12/24 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
卡塔尔航空官方网站：Qatar Airways
2017/02/08 全球购物
LG西班牙网上商店：Tienda LG Online Es
2019/07/30 全球购物
竞聘演讲稿范文
2014/01/12 职场文书
销售会计岗位职责
2014/03/15 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL