首页
所有分类
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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jquery插件实现轮播图效果
Oct 19 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
建议书(203) 竞聘书(31) 决心书(42) 聘任书(31) 广告词(105) 主持词(345) 意向书(73) 担保书(46) 承诺书(369) 责任书(145)
You might like
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
php的instanceof和判断闭包Closure操作示例
2020/01/26 PHP
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
13个PHP函数超实用
2015/10/21 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
python中global与nonlocal比较
2014/11/21 Python
详细探究Python中的字典容器
2015/04/14 Python
Python合并字符串的3种方法
2015/05/21 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
python解释器spython使用及原理解析
2019/08/24 Python
深入了解python中元类的相关知识
2019/08/29 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
荷兰最大的多品牌男装连锁店：Adam Brandstore
2019/12/31 全球购物
斯洛伐克电子产品购物网站：DATART
2020/04/05 全球购物
如何整合JQuery和Prototype
2014/01/31 面试题
党的群众路线教育学习材料
2014/05/12 职场文书
股票投资建议书
2014/05/19 职场文书
自动化专业大学生职业生涯规划范文：爱拚才会赢
2014/09/12 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
小兵张嘎观后感
2015/06/03 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python