javascript - Get elements from one class to another class in HTML Table -


i need loop through .mainheader class .mainheader because need header class row , values class row value grouping

this html

<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>             <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 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> header1.2</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 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> header2</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> subheader2.1</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>     </tbody> </table> 

my javascript

var groupdata = {}; var subgroupdata = {}; var arr = [];    $('#t01 tbody tr.mainheader').each(function(i) {      var groupiddata ={};     groupiddata['id'] = $(this).attr('id');     groupiddata['name'] = $(this).find('td:eq(2)').text().trim()     groupiddata["action"]= 'add/edit/delete'     //arr.push(garr)    groupdata['group'] = groupiddata;   groupdata['subgrps'] = [];      subgroupdata = {};         subgroupdata["action"]= 'add/edit/delete'     subgroupdata['id'] =$(this).next('.header').attr('id');         subgroupdata['name']= $(this).next('.header').find('td:eq(2)').text().trim();     //arr.push(garr)    groupdata['subgrps'].push(subgroupdata)   subgroupdata['items'] = [];    var items = [];   $(this).next('tr').each(function(){     if($(this).hasclass('values'))     {       var rowdata = {};      $(this).find('td').each(function(i) {       var thh = $(this).closest('table').find('th').eq($(this).index()).text();       if(i == 0)         rowdata["action"]='add/edit/delete'       if(i>1)       rowdata[thh]=$(this).text().trim()      });     //arr.push(garr)     items.push(rowdata)     }     else       return   });          //console.log('over')      }     subgroupdata['items'].push(items);     groupdata['subgrps'].push(subgroupdata);     arr.push(groupdata); }); alert(json.stringify(arr))  ; 

my fiddle

https://jsfiddle.net/694kjj3o/

i expecting json this

[     {         "group": {             "value": "header1"         },         "subgrps": [             {                 "name": {                     "value": "subheader1.1"                 },                 "items": [                     [                         {                             "value": {                                 "group_main_id": 1,                                 "group_sub_id": 5,                                 "item": "4",                                 "instructions": null,                                 "decision_request_input": null,                                 "status": null,                                 "evidence_info": null,                                 "evidence_doc": null                             }                         }                     ],                     [                         {                             "value": {                                 "group_main_id": 1,                                 "group_sub_id": 5,                                 "item": "4",                                 "instructions": null,                                 "decision_request_input": null,                                 "status": null,                                 "evidence_info": null,                                 "evidence_doc": null                             }                         }                     ]                 ]             },             {                 "name": {                     "value": "subheader1.2"                 },                 "items": [                     [                         {                             "value": {                                 "group_main_id": 1,                                 "group_sub_id": 5,                                 "item": "4",                                 "instructions": null,                                 "decision_request_input": null,                                 "status": null,                                 "evidence_info": null,                                 "evidence_doc": null                             }                         }                     ]                 ]             }         ]     },     {         "group": {             "value": "header2"         },         "subgrps": [             {                 "name": {                     "value": "header2.1"                 },                 "items": [                     [                         {                             "value": {                                 "group_main_id": 1,                                 "group_sub_id": 5,                                 "item": "4",                                 "instructions": null,                                 "decision_request_input": null,                                 "status": null,                                 "evidence_info": null,                                 "evidence_doc": null                             }                         }                     ]                 ]             }         ]     } ] 

i unable loop . kindly guide me in situation

try

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

demo: fiddle

if want dynamic key , values

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

demo

https://jsfiddle.net/95nqr6op/6/


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -