Question

我需要将.mainheader类循环到.mainheader，因为我需要header类行和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
                            }
                        }
                    ]
                ]
            }
        ]
    }
]

我无法循环播放。请在这种情况下指导我

Answer 1

尝试

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

样本

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

Answer 2

您的代码正在使用额外的大括号}。我更新了代码。我在控制台上发现了一些错误。

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

从HTML表中的一个类获取元素到另一个类

2 个答案: