JSFiddle - React, Tailwind, and code Playground

by denvut

HTML

<pre>
       <table class="cdr_report ubdir-list report_table" data-url="/ui/inventory/ub/cdr_collection_report/data">
<thead>
  <tr>
    <th class="ID" rowspan="2">ID</th>
    <th class="Group" rowspan="2">Group</th>
    <th class="Name" rowspan="2">Name</th>
    <th class="Stats numeric" rowspan="2">Total Files</th>
    <th class="Stats" rowspan="2">Last Extract</th>
    <th class="Stats" rowspan="1" colspan="2">Extracted Files</th>
    <th class="Stats" rowspan="2">Last Load</th>
    <th class="Stats" rowspan="1" colspan="2">Loaded Files</th>
    
  </tr>
  <tr>
  
    <th class="numeric">Total</th>
    <th class="numeric">For period</th>
  
    <th class="numeric">Total</th>
    <th class="numeric">For period</th>
  
  
  </tr>
</thead>
<tbody>

  
    <tr class="">
      
        <td>2</td>
      
        <td>Network</td>
      
        <td>3_level_group_EP - ep1</td>
      
        <td>0</td>
      
        <td>N/A</td>
      
        <td>0</td>
      
        <td>0</td>
      
        <td>N/A</td>
      
        <td>0</td>
      
        <td>0</td>
      
    </tr>
  
    <tr class="ubd-oddrow">
      
        <td>4</td>
      
        <td>Network</td>
      
        <td>N+K DUMNED SYSTEM 0.52</td>
      
        <td>0</td>
      
        <td>N/A</td>
      
        <td>0</td>
      
        <td>0</td>
      
        <td>N/A</td>
      
        <td>0</td>
      
        <td>0</td>
      
    </tr>
  
    <tr class="">
      
        <td>1</td>
      
        <td>Network</td>
      
        <td>UB6000 - 0.166</td>
      
        <td>0</td>
      
        <td>N/A</td>
      
        <td>0</td>
      
        <td>0</td>
      
        <td>N/A</td>
      
        <td>0</td>
      
        <td>0</td>
      
    </tr>
  


</tbody>
</table>
    <div id="debug"></div>
</pre>

CSS

th { font-weight: bold; }

JavaScript

/*  cellPos jQuery plugin
    ---------------------
    Get visual position of cell in HTML table (or its block like thead).
    Return value is object with "top" and "left" properties set to row and column index of top-left cell corner.
    Example of use:
        $("#myTable tbody td").each(function(){ 
            $(this).text( $(this).cellPos().top +", "+ $(this).cellPos().left );
        });
*/
(function($){
    /* scan individual table and set "cellPos" data in the form { left: x-coord, top: y-coord } */
    function scanTable( $table ) {
        var m = [];
        $table.children( "tr" ).each( function( y, row ) {
            $( row ).children( "td, th" ).each( function( x, cell ) {
                var $cell = $( cell ),
                    cspan = $cell.attr( "colspan" ) | 0,
                    rspan = $cell.attr( "rowspan" ) | 0,
                    tx, ty;
                cspan = cspan ? cspan : 1;
                rspan = rspan ? rspan : 1;
                for( ; m[y] && m[y][x]; ++x );  //skip already occupied cells in current row
                for( tx = x; tx < x + cspan; ++tx ) {  //mark matrix elements occupied by current cell with true
                    for( ty = y; ty < y + rspan; ++ty ) {
                        if( !m[ty] ) {  //fill missing rows
                            m[ty] = [];
                        }
                        m[ty][tx] = true;
                    }
                }
                var pos = { top: y, left: x };
                $cell.data( "cellPos", pos );
            } );
        } );
    };

    /* plugin */
    $.fn.cellPos = function( rescan ) {
        var $cell = this.first(),
            pos = $cell.data( "cellPos" );
        if( !pos || rescan ) {
            var $table = $cell.closest( "table, thead, tbody, tfoot" );
            scanTable( $table );
        }
        pos = $cell.data( "cellPos" );
        return pos;
    }
})(jQuery);

$(document).ready(function() {
    $("table thead...