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
Comments
Post a Comment