SO - 30252396

by Arun P Johny

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": {
                "value": $main.text().trim()
            },
                "subgrps": []
        };
    console.group($main.text().trim());
    console.log(this);

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

        $header.nextUntil('.mainheader, .header', '.values').each(function (i) {
            var $tr = $(this),
                $tds = $tr.children(),
                obj = {
                    "value": {
                        "Group_Main_ID": $tds.eq(0).text().trim(),
                            "Group_Sub_ID": $tds.eq(1).text().trim(),
                            "Item": $tds.eq(2).text().trim(),
                            "Instructions": null,
                            "Decision_Request_Input": null,
                            "Status": null,
                            "Evidence_Info": null,
                            "Evidence_Doc": null
                    }
                };
            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));