jquery merge adjacent cells with the same text in a table

Home

Web Front-end

JS Tutorial

jquery merge adjacent cells with the same text in a table_jquery

May 16, 2016 pm 03:50 PM

jquery Merge tables

1. Effect

2. Code

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

  &lt;script type="text/javascript"&gt;
//函数说明：合并指定表格（表格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&gt;0)&&(i&gt;_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);
 });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

Tested it and it was great!

The above is the entire content of this article, I hope you all like it.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn