table row merge plugin

merge table rows

by Seungrae Lee

HTML

<table>
  <tr>
    <td>
      <table id="dataList" border="1" cellspacing="2" cellpadding="5" style="width:100%;">
        <tr>
          <td class="h1">対象年</td>
          <td class="h1">期</td>
          <td class="h1">月</td>
          <td class="h1">対象月</td>
          <td class="h1">表示対象</td>
        </tr>
        <tr>
          <td>2013</td>
          <td>下期</td>
          <td>10</td>
          <td></td>
          <td>1</td>
        </tr>
        <tr>
          <td>2013</td>
          <td>下期</td>
          <td>11</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>2013</td>
          <td>下期</td>
          <td>12</td>
          <td></td>
          <td>1</td>
        </tr>
        <tr>
          <td>2013</td>
          <td>下期</td>
          <td>1</td>
          <td></td>
          <td>1</td>
        </tr>
        <tr>
          <td>2013</td>
          <td>下期</td>
          <td>2</td>
          <td></td>
          <td>1</td>
        </tr>
        <tr>
          <td>2013</td>
          <td>下期</td>
          <td>3</td>
          <td></td>
          <td>1</td>
        </tr>
        <tr>
          <td>2014</td>
          <td>上期</td>
          <td>4</td>
          <td colspan="2">
            <table border="0" cellspacing="0" cellpadding="0" height="100%" width="100%" class="rowMerge-ignored">
              <tr>
                <td nowrap>
                  <table border="0" width="100%">
                    <tr>
                      <td align="left">(400文字以内)</td>
                      <td align="right">入力文字数 ： <span id="labelEtcReason">0</span>
                      </td>
                    </tr>
                  </table>
                  <table height="100%" class="tbl3" width="100%">
                    <tr>
                      <td valign="top" height="100%" width="100%">
                        <textarea name="etcReason" style="width:366px; height:54px;" wrap="soft"></textarea>
                      </td>
                 ...

JavaScript

/*!
 * jQuery merge plugin
 * version: 1.1.0-2018.08.07
 * Released under the MIT license
 */
/****************************************************************
 * usage:
 *         $(selector).rowMerge({
 *            rowIndex: 2,
 *            cellIndex: [1, 2]
 *         });
 * options:
 *        @rowIndex: start row index(1based index)
 *        @cellIndex: td indexes to be merged(1based index)
 */
(function(factory) {
    if (typeof define === "function" && define.amd) {
      // AMD. Register as an anonymous module.
      define(["jquery"], factory);
    } else {
      // Browser globals
      factory(jQuery);
    } //if~else
  }(function($) {
    var ignoredClass = ".rowMerge-ignored";
    $.extend($.fn, {
      rowMerge: function(options) {
        return new $.rowMerge(options, this);
      }
    });

    // constructor
    $.rowMerge = function(options, target) {
      // merge options
      this.o = $.extend(true, {}, $.rowMerge.defaults, options);
      this.target = target;
      this.init();
    };

    // implementation
    $.extend($.rowMerge, {
      version: "1.1.1",
      defaults: {
        rowIndex: 1,
        cellIndex: [1]
      },
      prototype: {
        init: function() {
          // cell length before merging
          this.tdLen = this.length(this.target.find("tr:nth-child(" + this.o.rowIndex + ")"));
          this.delArrays = [];
          this._scan();
        },
        _scan: function() {
          var self = this,
            indexArray = self.o.cellIndex;
          $.each(indexArray, function(i, o) {
            self._cellMergeChk(o);
          });
        },
        _cellMergeChk: function(cellIndex) {
          var self = this,
            $target = $(self.target),
            options = self.o,
            cnt = 1,
            compareObj = $target.find("tr:nth-child(" + options.rowIndex + ") td:nth-child(" + cellIndex + ")");

          // :gt(0-index)
          $target.find("tr:gt(" + (options.rowIndex - 1) +...