javascript - Jquery从HTML表中获取元素并按列放入数组中

Question

目前我有一个 html 格式的 jqGrid。我正在寻找一种从 HTML 元素而不是 jqGrid 对象中提取数据的方法，并将每列放入一个数组中。我查看了很多示例，但无法找到能够按照我需要的方式工作的东西..

这就是我目前所拥有的。它拉取 jgGrid(一个 .d 类)并将其加载到 dTags 中。然后我抓取 tableId 并尝试提取行数据(我实际上需要列数据只是用于示例)，但我没有运气。任何帮助将非常感激。

function generateXML()
{
    // get class tags d, np, ch
    var dTags = $(".d");
    var npTags = $(".np");
    var chTags = $(".ch");

    for(var i = 0; i<dTags.size(); i++)
    {
        log(dTags.size());
        var tableId = dTags[i].id;
    var tableName = "#" + tableId + " td:nth-child(0)";
    log(tableName);
    var colArray = $(tableName).map(function(){
        return $(this).text();
    }).get();
    log(JSON.stringify(colArray));
    }
}

HTML - 看起来像这样

<table id="polarizationTable" class="d" ></table>

jqGrid 生成的 html 看起来像这样......

生成的代码是..

<div class="ui-jqgrid ui-widget ui-widget-content ui-corner-all" id="gbox_polarizationTable" dir="ltr" style="width: 729px; "><div class="ui-widget-overlay jqgrid-overlay" id="lui_polarizationTable"></div><div class="loading ui-state-default ui-state-active" id="load_polarizationTable" style="display: none; ">Loading...</div><div class="ui-jqgrid-view" id="gview_polarizationTable" style="width: 729px; "><div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix"><a role="link" href="javascript:void(0)" class="ui-jqgrid-titlebar-close HeaderButton" style="right: 0px; "><span class="ui-icon ui-icon-circle-triangle-n"></span></a><span class="ui-jqgrid-title">Polarization Table</span></div><div style="width: 729px; " class="ui-state-default ui-jqgrid-hdiv"><div class="ui-jqgrid-hbox"><table class="ui-jqgrid-htable" style="width: 711px; " role="grid" aria-labelledby="gbox_polarizationTable" cellspacing="0" cellpadding="0" border="0"><thead><tr class="ui-jqgrid-labels" role="rowheader"><th id="polarizationTable_TestTime" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 97px; "><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize; ">&nbsp;</span><div id="jqgh_polarizationTable_TestTime" class="ui-jqgrid-sortable">Minutes<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th><th id="polarizationTable_RdgA" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 97px; "><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize; ">&nbsp;</span><div id="jqgh_polarizationTable_RdgA" class="ui-jqgrid-sortable">Reading A<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th><th id="polarizationTable_CorrA" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 97px; "><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize; ">&nbsp;</span><div id="jqgh_polarizationTable_CorrA" class="ui-jqgrid-sortable">Corr A<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th><th id="polarizationTable_RdgB" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 97px; "><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize; ">&nbsp;</span><div id="jqgh_polarizationTable_RdgB" class="ui-jqgrid-sortable">Reading B<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th><th id="polarizationTable_CorrB" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 97px; "><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize; ">&nbsp;</span><div id="jqgh_polarizationTable_CorrB" class="ui-jqgrid-sortable">Corr B<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th><th id="polarizationTable_RdgC" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 97px; "><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize; ">&nbsp;</span><div id="jqgh_polarizationTable_RdgC" class="ui-jqgrid-sortable">Reading C<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th><th id="polarizationTable_CorrC" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 94px; "><span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize; ">&nbsp;</span><div id="jqgh_polarizationTable_CorrC" class="ui-jqgrid-sortable">Corr C<span class="s-ico" style="display:none"><span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr"></span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></div></th></tr></thead></table></div></div><div class="ui-jqgrid-bdiv" style="height: 250px; width: 729px; "><div style="position:relative;"><div></div><table id="polarizationTable" class="d ui-jqgrid-btable" tabindex="1" cellspacing="0" cellpadding="0" border="0" role="grid" aria-multiselectable="false" aria-labelledby="gbox_polarizationTable" style="width: 711px; "><tbody><tr class="jqgfirstrow" role="row" style="height:auto"><td role="gridcell" style="height: 0px; width: 97px; "></td><td role="gridcell" style="height: 0px; width: 97px; "></td><td role="gridcell" style="height: 0px; width: 97px; "></td><td role="gridcell" style="height: 0px; width: 97px; "></td><td role="gridcell" style="height: 0px; width: 97px; "></td><td role="gridcell" style="height: 0px; width: 97px; "></td><td role="gridcell" style="height: 0px; width: 94px; "></td></tr><tr role="row" id="1" tabindex="0" class="ui-widget-content jqgrow ui-row-ltr ui-state-highlight" aria-selected="true"><td role="gridcell" style="text-align:center;" title="0.25" aria-describedby="polarizationTable_TestTime">0.25</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr><tr role="row" id="2" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="text-align:center;" title="0.5" aria-describedby="polarizationTable_TestTime">0.5</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr><tr role="row" id="3" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="text-align:center;" title="0.75" aria-describedby="polarizationTable_TestTime">0.75</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr><tr role="row" id="4" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="text-align:center;" title="1" aria-describedby="polarizationTable_TestTime">1</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr><tr role="row" id="5" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="text-align:center;" title="2" aria-describedby="polarizationTable_TestTime">2</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr><tr role="row" id="6" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="text-align:center;" title="3" aria-describedby="polarizationTable_TestTime">3</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr><tr role="row" id="7" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="text-align:center;" title="4" aria-describedby="polarizationTable_TestTime">4</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr><tr role="row" id="8" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="text-align:center;" title="5" aria-describedby="polarizationTable_TestTime">5</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr><tr role="row" id="9" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="text-align:center;" title="6" aria-describedby="polarizationTable_TestTime">6</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr><tr role="row" id="10" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="text-align:center;" title="7" aria-describedby="polarizationTable_TestTime">7</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr><tr role="row" id="11" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="text-align:center;" title="8" aria-describedby="polarizationTable_TestTime">8</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr><tr role="row" id="12" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="text-align:center;" title="9" aria-describedby="polarizationTable_TestTime">9</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr><tr role="row" id="13" tabindex="-1" class="ui-widget-content jqgrow ui-row-ltr"><td role="gridcell" style="text-align:center;" title="10" aria-describedby="polarizationTable_TestTime">10</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrA">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrB">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_RdgC">&nbsp;</td><td role="gridcell" style="text-align:center;" title="" aria-describedby="polarizationTable_CorrC">&nbsp;</td></tr></tbody></table></div></div></div><div class="ui-jqgrid-resize-mark" id="rs_mpolarizationTable">&nbsp;</div></div>

本质上，我需要将 Minutes、Reading A、Corr A 等数据放入各自的数组中...稍后我将根据这些数据构建一个自定义 XML 文件。希望这能让事情变得更清楚。

Answer 1

您可以使用 :nth-child 和 .map() 函数:

var minutes = jQuery('.ui-jqgrid-bdiv tr.ui-widget-content td:nth-child(1)')
  .map(function(){
    return $(this).html();
  });

var readingA = jQuery('.ui-jqgrid-bdiv tr.ui-widget-content td:nth-child(2)')
  .map(function(){
    return $(this).html();
  });

/// and so on...

通过一些工作，您可以将其包装在 .each() 处理程序中，以编程方式步进每个列名称，而不是手动指定它们。