获取从一个类元素，在HTML表另一个类

我需要遍历.mainheader类.mainheader，因为我需要header类行和分组获取从一个类元素，在HTML表另一个类

这values类行值是我的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>

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

我的小提琴

https://jsfiddle.net/694kjj3o/

我期待JSON这个样子的

[ 
    { 
     "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 
          } 
         } 
        ] 
       ] 
      } 
     ] 
    } 
]

我不能循环它。请在这种情况下指导我

来源

2015-05-15 Sridhar R

更好地使用网络爬虫 – madalinivascu

我需要循环它并形成一个json，爬虫不会做表格json –

什么exacly不工作？ – madalinivascu

尝试

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

演示：Fiddle

如果你想获得动态密钥和值

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/

来源

2015-05-15 06:47:51

嗨@阿伦你做得很好，我使用动态标题键和值来改变上面的代码。请参阅https://jsfiddle.net/95nqr6op/6/。再一次感谢你:-) –

您的代码有额外的关闭花括号}。我更新了代码。我在控制台上发现了一些错误。

$('#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); 
});

来源

2015-05-15 06:24:24

获取从一个类元素，在HTML表另一个类

回答

相关问题