JSFiddle - React, Tailwind, and code Playground

by Arasu RRK

HTML

<table border="1" border-collapse="collapse" id="mytable">
  <tr class="parent-grid-row">
    <th>Id</th>
    <th>Action</th>
  </tr>
  <tr class="parent-grid-row">
    <td class="parent-grid-column">0001</td>
    <td class="parent-grid-column child-grid-container">
        <img src="http://png.findicons.com/files/icons/1715/gion/24/list_add.png" />
        <div style="display: none;" id="childgrid-4">
            <table>
                <colgroup>
                    <col>
                    <col>
                    <col>
                </colgroup>
                 <tbody>
                     <tr>
                         <td>1</td>
                         <td>Student 1</td>
                     </tr>
                     <tr>
                         <td>2</td>
                         <td>Student 2</td>
                     </tr>
                     <tr>
                         <td>3</td>
                         <td>Student 3</td>
                     </tr>
                  </tbody>
               </table>
            </div>
        </td>
  </tr>
      <tr class="parent-grid-row">
    <td class="parent-grid-column">0001</td>
    <td class="parent-grid-column">
        <img src="http://png.findicons.com/files/icons/1715/gion/24/list_add.png" />        
        <div style="display: none;" id="childgrid-4">
            <table border="1" border-collapse="collapse">
                <colgroup>
                    <col>
                    <col>
                    <col>
                </colgroup>
                 <tbody>
                     <tr>
                         <td>1</td>
                         <td>Student 1</td>
                     </tr>
                     <tr>
                         <td>2</td>
                         <td>Student 2</td>
                     </tr>
                     <tr>
                         <td>3</td>
                         <td>Student 3</td>
                     </tr>
                  </tbody>
              ...

CSS

table, tr, td{
    border: 1px solid black;
    border-collapse: collapse;
}

JavaScript

$(document).ready(function(){
    MergeGridCells();
});

function MergeGridCells()
{
    var dimension_cells = new Array();
    var dimension_col = null;
 
    var i = 1;
    // First, scan first row of headers for the "Dimensions" column.
    $("#mytable").find('th').each(function () {
        if ($(this).text() == 'Id') {
            dimension_col = i;
        }
        i++;
    });
 
    // first_instance holds the first instance of identical td
    var first_instance = null;
    var rowspan=1;
    // iterate through rows
    $("#mytable").find('tr.parent-grid-row').each(function () {
 
        // find the td of the correct column (determined by the dimension_col set above)
        var dimension_td = $(this).find('td.parent-grid-column:nth-child(' + dimension_col + ')');
 
        if (first_instance == null) {
            // must be the first row
            first_instance = dimension_td;
        } else if (dimension_td.text() == first_instance.text()) {
            // the current td is identical to the previous
            // remove the current td
            dimension_td.remove();
            ++rowspan;
            // increment the rowspan attribute of the first instance
            first_instance.attr('rowspan', rowspan);
        } else {
            // this cell is different from the last
            first_instance = dimension_td;
            rowspan=1;
        }
    });
}

$(".child-grid-container img").click(function(){
    $(this).next("div").slideToggle(1500);
});