javascript - 在 HTML Table 中将元素从一个类获取到另一类

标签 javascript jquery html

我需要将 .mainheader 类循环到 .mainheader 因为我需要 header 类行和 值用于分组的类行值

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

我的 fiddle

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
                            }
                        }
                    ]
                ]
            }
        ]
    }
]

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

最佳答案

尝试

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/

关于javascript - 在 HTML Table 中将元素从一个类获取到另一类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30252396/

上一篇：javascript - 避免 DOM 元素在 .text() 上被删除的方法

下一篇：javascript - 如何检查日期是否过去？以及如何获取两个日期之间的差异？按输入标签类型日期和类型时间

相关文章：

javascript - Python 套接字脚本 <-> HTML 客户端

javascript - 将每个选择选项值转换为值列表

jquery - 如何在不向右滑动下一个元素的情况下在悬停时显示 jquery 函数

javascript - 为什么 Javascript 没有正确创建表格？

javascript - 尝试在 JavaScript/jQuery 中添加点击事件

javascript - 使用 jQuery 按名称属性获取选择值

css - 为什么页面加载时div位置会改变？

python - 类型错误 : expected string or buffer while using regular expression in python

javascript - 根据 AngularJS 服务值的变化更新指令

javascript - 将变量添加到 img 标签

©2024 IT工具网  联系我们