JQuery实现单元格的合并

• 布局部分

<div class="tb">
  <table id="table_4" width="780" border="1" cellspacing="0" cellpadding="0" style="table-layout:fixed">
     <tr class="active">
      <td width="50">序号</td>
      <td width="50">编号</td>
      <td width="120">姓名</td>
      <td width="50">性别</td>
      <td width="200">班级</td>
     </tr>
      <tr>
        <td >1</td>
        <td >1</td>
        <td>光头强</td>
        <td>男</td>
        <td>Java1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>小美</td>
        <td>女</td>
        <td>Java1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>3</td>
        <td>慧慧</td>
        <td>女</td>
        <td>Java1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>4</td>
        <td>李锡龄</td>
        <td>男</td>
        <td>Java2</td>
      </tr>
      <tr>
        <td>2</td>
        <td>5</td>
        <td> 李孝利</td>
        <td>男</td>
        <td>Java2</td>
      </tr>
      <tr>
        <td>2</td>
        <td>6</td>
        <td>刘德国</td>
        <td>男</td>
        <td>Java2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>7</td>
        <td>李娜</td>
        <td>女</td>
        <td>Java3</td>
      </tr>
      <tr>
        <td>3</td>
        <td>8</td>
        <td>谢晨</td>
        <td>男</td>
        <td>Java3</td>
      </tr>
      <tr>
        <td>3</td>
        <td>9</td>
        <td>李琛</td>
        <td>男</td>
        <td>Java3</td>
      </tr>
  </table>
 </div>

• 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: "Microsoft YaHei";
  font-weight:bold;
  background:none;margin-left: auto;margin-right: auto;}
.bt{color: #121212;font-size: 26px; line-height:80px;text-align: center;}
.tb { margin:auto;width: 780px;}
.title {
  color: #0070C0;
}
.active {
  background-color: #0070C0;
}
td {
  text-align: center;
}

• js部分

(function($) {
  // $.fn就是$.prototype
  $.fn.mergeCell = function(options) {
    return this.each(function() {
      //列
      var cols = options.cols;
      for (var i = cols.length - 1; cols[i] != undefined; i--) {
       mergeCell($(this), cols[i]);
      }
      dispose($(this));
    });
  };
  function mergeCell($table, colIndex) {
    $table.data('col-content', ''); // 存放单元格内容
    $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
    $table.data('col-td', $());   // 存放发现的第一个与前一行比较结果不同td, 默认空jquery对象
    $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
    $('tbody tr', $table).each(function(index) {
      // td:eq列索引
      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.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);
        }
      }
    });
  }
  //  清理内存
  function dispose($table) {
    $table.removeData();
  }
})(jQuery);
//调用函数
 $('#table_4').mergeCell({
    cols:[0,4]
  });

• 效果