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

更新时间：2015年07月17日 10:23:52 投稿：hebedich

这篇文章主要介绍了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>

测试使用了一下，很赞！

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

您可能感兴趣的文章:

jQuery中add实现同时选择两个id对象
jquery同时选择两个id对象的时候，可以用add来实现。
2010-10-10
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
这篇文章主要介绍了jQuery插件echarts实现的循环生成图效果,结合完整实例形式分析了echarts插件循环输出数字图形的实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2017-03-03
jQuery+ajax实现鼠标单击修改内容的思路
这篇文章主要介绍了jQuery+ajax实现鼠标单击修改内容的思路及核心代码，需要的朋友可以参考下
2014-06-06
JQuery之focus函数使用介绍
focus函数可以用来发生点击某个按钮或者提交值错误等触发事件发生时把焦点给到某个元素,具体用法如下，感兴趣的朋友可以参考下
2013-08-08
jQuery中index()方法用法实例
这篇文章主要介绍了jQuery中index()方法用法,实例分析了index()方法返回索引值的几种常见使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2014-12-12
jQuery实现区域打印功能代码详解
这篇文章主要介绍了jQuery实现区域打印功能代码详解的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
公司项目需求中有一个类似于新浪微博新消息提示的定位框的效果，需要的朋友可以参考下。
2011-05-05
基于jQuery的图片剪切插件
网页应用程序需要对丰富的内容提供简单易用的上传和操作方式，但是这样会给只有少数图片处理技能的用户造成很大的困难。图片剪切是最基本的图片处理技术，这个详细的教程将包括在jQuery库上创建此参加的每一个步骤。
2011-08-08
jquery+正则实现统一的表单验证
表单验证一直很繁琐，特别是大点的表单，如果每个input都去单独写验证简直要写死人，最近写了一小段js统一的验证表单内容是否正确。需要的朋友可以参考下
2015-09-09
分享我的jquery实现下拉菜单心的
jquery库给我们带来了很多方便的地方，使用jquery实现一个简单的下拉菜单已经是很简单了，但也有不同的实现方法。今天自己使用jquery写了一个下拉菜单，参考了Xiaofeng Wang的SexyDropDownMenu2010，其中还是有一些东西感觉值得记录一下。
2015-11-11

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具