JSFiddle - React, Tailwind, and code Playground

by denvut

HTML

<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>

JavaScript

var $table = $("table")
    rows = [],
    header = [];

$table.find("thead th ").each(function () {
		
    
    var getHeaderCells = function(table) {
        var headerCells = new MultiArray();
        $('thead tr', table).each(function (row) {
            var tr = $(this);
            var col = 0;
            $('th', tr).each(function () {
                // skip filled cells in this row
                for (; headerCells.get(row, col); ++col);

                var el = $(this);

                // fill spans
                var rowSpan = parseInt($(el).attr('rowspan'));
                var colSpan = parseInt($(el).attr('colspan'));
                headerCells.setRect(row, col, rowSpan, colSpan, el);
            });
        });
        console.log(headerCells);
        return headerCells;
    };

    var getHeaderNames = function (headerCells) {
        var getAdjacentlyDifferent = function (arr) {
            return arr.filter(function (el, i, arr) {
                return i === 0 || el !== arr[i-1];
            });
        };
        var elText = function(el) { return el.text(); };
        return headerCells.transpose().arr.map(function (col) {
            return getAdjacentlyDifferent(col).map(elText).join(": ");
        });
    };
    
    
    
    header.push($(this).html());
    console.log(header);
      
    if($(this).attr('colspan') > 1){
        console.log($(this));
    
        
    }
    
	
    console.log($("th.colspan").children($("th")).html());
});

$table.find("tbody tr").each(function () {
    var row = {};
    
    $(this).find("td").each(function (i) {
        var key = header[i],
            value = $(this).html();
        
        row[key] = value;
    });
    
    rows.push(row);
});
    
    
alert(JSON.stringify(rows));
console.log(JSON.stringify(rows, null, "\t"));