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 相关文章推荐
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
JavaScript 获取事件对象的注意点
Jul 29 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 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程序员必须清楚的问题汇总
2014/12/18 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
php-app开发接口加密详解
2018/04/18 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
详解angular element()方法使用
2017/04/08 Javascript
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
vue内置指令详解
2018/04/03 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
python实现逆波兰计算表达式实例详解
2015/05/06 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
python执行使用shell命令方法分享
2017/11/08 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
美国定制钻石订婚戒指:Ritani
2017/12/08 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
承诺书格式范文
2014/06/03 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
给老师的保证书怎么写
2015/05/09 职场文书