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 myRows = [];
var $headers = $("th");
var $rows = $("tbody tr").each(function(index) {
$cells = $(this).find("td");
myRows[index] = {};
$cells.each(function(cellIndex) {
myRows[index][$($headers[cellIndex]).html()] = $(this).html();
});
});
var myObj = {};
myObj.myrows = myRows;
alert(JSON.stringify(myObj, null, "\t"));
console.log(JSON.stringify(myObj, null, "\t"));