JSFiddle - React, Tailwind, and code Playground

by Seungrae Lee

HTML

<table border="0" cellspacing="1" cellpadding="5" height="100%" width="100%" class="tbl3" id="proTbl">
    <tr height="20">
        <th class="h0" colspan="2"><font size="2">評価項目</font>

        </th>
        <th class="h0"><font size="2">着眼点</font>

        </th>
        <th class="h0"><font size="2">処理者</font>

        </th>
        <th class="h0"><font size="2">評価</font>

        </th>
        <th class="h2"><font size="2">評価点</font>

        </th>
    </tr>
    <tr>
        <td class="d9" nowrap>その他</td>
        <td class="d8"></td>
        <td class="d10" rowspan="1">上記の項目以外に特筆すべき事項がある場合に+２点から△２点で評価する。</td>
        <td class="d0">1次</td>
        <td class="d1" colspan="2">
            <select name="etcProcessCd1">
                <option value="11501">A</option>
                <option value="11502">B</option>
                <option value="11503">C</option>
            </select>点</td>
    </tr>
    <tr>
        <td class="d9" nowrap>その他</td>
        <td class="d8">評価理由：</td>
        <td class="d10" colspan="4">
            <table border="0" cellspacing="0" cellpadding="0" height="100%" width="100%" class="rowMerge-ignored">
                <tr>
                    <td>test</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- プロセス評価 end -->

CSS

table.tbl3 th.h0, table.tbl3 th.h1, table.tbl3 th.h2, tbl.tbl3 h5 {
    padding: 5px;
    color: #EEE;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
}
table.tbl3 th.h0 {
    background-color: #737373;
}
table.tbl3 th.h1 {
    background-color: #4F647E;
}
table.tbl3 th.h2 {
    background-color: #C20027;
}
table.tbl3 th.h5 {
    background-color: #FFCC99;
}
table.tbl3 th.h3, table.tbl3 th.h4 {
    font-size: 11pt;
    text-align: left;
    color: #000;
    background-color: #F7F3F7;
}
table.tbl3 th.h4 {
    vertical-align: top;
}
table.tbl3 td.d0 {
    text-align: center;
    padding: 3px 5px;
    background-color: #E6E6E6;
}
table.tbl3 td.d1 {
    text-align: center;
    padding: 3px 5px;
    background-color: #C3D7EB;
}
table.tbl3 td.d2 {
    text-align: center;
    padding: 3px 5px;
    background-color: #FFDAB9;
}
table.tbl3 td.d3 {
    font-family:'ＭＳ Ｐゴシック', Osaka;
    word-wrap: break-word;
    font-size: 9pt;
}
table.tbl3 td.d4 {
    text-align: left;
    padding: 3px 5px;
    background-color: #E6E6E6;
}
table.tbl3 td.d7 {
    background-color: #A5AEBD;
}
table.tbl3 td.d8, table.tbl3 td.d9 {
    font-size: 11pt;
    text-align: left;
    vertical-align: top;
    color: #000;
    font-weight: bold;
}
table.tbl3 td.d8 {
    background-color: #F7F3F7;
}
table.tbl3 td.d9 {
    background-color: #E7E3ED;
}
table.tbl3 td.d10 {
    text-align: left;
    vertical-align: top;
    padding: 3px 5px;
    background-color: #E6E6E6;
}
table.tbl3 td.d11 {
    padding: 5px 3px 3px 3px;
    border-bottom: 1px solid #BFBFBF;
}
table.tbl3 td.d12 {
    padding: 5px 3px 3px 3px;
    border: 1px solid #BFBFBF;
}
.uline {
    padding : 3px 5px;
    border-bottom: solid 2px #C2C2C2;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFFFFF', EndColorStr='#E0E0E0');
}

JavaScript

/*****************************************************************************
  * Change Activity:
  * --------------------------------------------------------------------------
  * Date        Author      Description
  * --------------------------------------------------------------------------
  *	2013/11/08	banana		Initial Code Drop
  *	2014/02/20	banana		Bug fix.(merge last rows)
  * 2014/12/25  banana      Add features.
                            #ignore the inner table
                            #support colspan
  *****************************************************************************
  * usage:
  *         $(selector).rowMerge({
  *            rowIndex: 2,
  *            cellIndex: [1, 2]
  *         });
  * options:
  *        @rowIndex: start row index(1-index)
  *        @cellIndex: td indexes to be merged(1-index)
  */
(function ($) {
     var ignoredClass = '.rowMerge-ignored';
     $.extend($.fn, {
         version: '1.1.0',
         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, {
         defaults: {
             rowIndex: 1,
             cellIndex: [1]
         },
         prototype: {
             init: function () {
                 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) {
               ...