SO - 30252396

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<table id="t01" cellspacing="0" cellpadding="0" class="table" style="margin-top:20px">
    <thead>
        <tr>
            <th class="sorting">Group_Main_ID</th>
            <th class="sorting">Group_Sub_ID</th>
            <th class="sorting">Item</th>
            <th class="sorting">Instructions</th>
            <th class="sorting">Decision_Request_Input</th>
            <th class="sorting">Status</th>
            <th class="sorting">Evidence_Info</th>
            <th class="sorting">Evidence_Doc</th>
        </tr>
    </thead>
    <tfoot></tfoot>
    <tbody id="editContents">
        <tr id="1" class="mainheader " bgcolor="#000033">
            <td id="nonEdit" class="th1 p_no" bgcolor="#215F8B">
<font color="white" align="left"></font>

            </td>
            <td class="th" bgcolor="#215F8B" align="left" style="color: white; display: table-cell;" colspan="7">
<font color="white" align="left"></font>
Header1</td>
        </tr>
        <tr id="2" class="header " bgcolor="#000033" style="opacity:0.8">
            <td id="nonEdit" class="th1" bgcolor="#215F8B">
<font color="white" align="left"></font>

            </td>
            <td class="th" bgcolor="#215F8B" align="left" style="color: white; display: table-cell;" colspan="7">
<font color="white" align="left"></font>
SubHeader1</td>
        </tr>
        <tr class="values">
            <td class="sno">1</td>
            <td>1</td>
            <td>4</td>
            <td>1</td>
            <td>2</td>
            <td>1</td>
            <td>null</td>
            <td>Yes#No#NA</td>
        </tr>
        <tr class="values">
            <td class="sno">1</td>
            <td>1</td>
            <td>4</td>
            <td>1</td>
            <td>2</td>
            <td>1</td>
            <td>null</td>
            <td>Yes#No#NA</td>
        </tr>
        <tr class="values">
            <td class="sno">1</td>
    ...

CSS

table#t01 th {
    background-color: #007dc1;
    color: white;
    max-height: 60px;
}

JavaScript

var arr = [];

$('#t01 tbody tr.mainheader').each(function (i) {
    var $main = $(this),
        main = {
            "group": {
                "action":'Add/Edit/Delete',
                "value": $main.text().trim()
            },
                "subgrps": []
        };
    //console.group($main.text().trim());
    //console.log(this);

    $main.nextUntil('.mainheader', '.header').each(function () {
        var $header = $(this);
            header = {
                "name": {
                    "action":'Add/Edit/Delete',
                    "value": $header.text().trim()
                },
                    "items": []
            };
        //console.group($header.text().trim());
        //console.log(this);

        $header.nextUntil('.mainheader, .header', '.values').each(function (i) {
            var $tr = $(this);
            obj = {};
            obj.action = 'Add/Edit/Delete';
            var sobj = {}
            $tr.find('td').each(function (i) {
                var thh = $(this).closest('table').find('th').eq($(this).index()).text();
                sobj[thh] = $(this).text().trim()
            });
            obj.value = sobj;
            //console.group(i);
            //console.log(this);

            header.items.push(obj);
            //console.groupEnd();
        });

        main.subgrps.push(header);
        //console.groupEnd();
    });

    arr.push(main);

    //console.groupEnd();
});
//console.log(arr)
console.log(JSON.stringify(arr));