1

Currently I have a jqGrid in html. I am looking for a way to pull the data from the HTML elements, not from the jqGrid object, and put each column into an array. I've looked at a bunch of examples and been unable to find something that works the way I need it..

This is what I have currently. It pulls the jgGrid, which is a .d class and loads it into dTags. Then I grab the tableId and try and pull the row data(I actually need column data was just using for an example) and am having no luck. Any help would be much appreciated.

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 - Looks like this

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

The html the jqGrid generates looks like this...

table

and the code that generates that is..

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

Essentially I need the data from Minutes, Reading A, Corr A, etc.. into respective arrays... later down the road I will be building an custom XML file from this data. Hope this clears things up a bit.

MTAG11
  • 396
  • 2
  • 8
  • 23
  • Can you give a simple table and show exactly what output you expect the function to generate? – David Thomas Nov 01 '12 at 17:47
  • Can we see your HTML structure please? Also if you can put your code on jsfiddle.net and provide us an example, even if it is not working, it will be helpful for us to help you out. – Pulkit Mittal Nov 01 '12 at 17:48

2 Answers2

1

You can use :nth-child and the .map() function:

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...

With a little bit of work you could wrap this in a .each() handler to step each column name programmatically, rather than manually specifying them all.

Pebbl
  • 34,937
  • 6
  • 62
  • 64
  • Excellent thank you this worked. Just did a for loop with number of columns and i so I didn't need 7 columns. (: – MTAG11 Nov 01 '12 at 18:46
0

It's not quite clear what you want to do, but at the first look you can just use getCol method of jqGrid instead of your current code.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • I'm trying to avoid the getCol method in jqGrid. Need to select the data from the elements that jqGrid generates. Going to edit and add more data right quick – MTAG11 Nov 01 '12 at 17:57
  • @MTAG11: Probably you used `getCol` in a wrong way. Moreover it's important to know **which type of data and which formatters you use for the column**. `getCol` enumerate the column data in very quick way (more quickly as `jQuery('.ui-jqgrid-bdiv tr.ui-widget-content td:nth-child(1)')` do). Then it calls `unformatter`. If you have for example boolean data formatted as checkboxes or just integers formatted as integer (so additional thausand separator could be inserted) then `getCol` will *correctly* decode (unformat) the data. – Oleg Nov 01 '12 at 19:03
  • @MTAG11: If you use `autoencode: true` then you can place in the cells the data like the string `` without any problem. In the case `getCol` will get you correctly decoded data. I recommend you to look inside of [the source code](https://github.com/tonytomov/jqGrid/blob/v4.4.1/js/grid.base.js#L3362-3411) to understand more what it do exactly. – Oleg Nov 01 '12 at 19:05
  • @MTAG11: If you want to have custom decoding of cell contain you can call `getCol("youColumName", true)`. Then you can use `$.map` do decode the result. You can compare performance of such solution with youth. You will see that the solution which based on `getCol` will work *quickly*. – Oleg Nov 01 '12 at 19:10
  • Oleg - thank you for your time. The reason I'm trying to not use the getCol method is because I'm writing a parser that will pull out the table information from html and parse it regardless if I use or any table. I'm writing the core code for a project and we won't always need jqGrid. Thank you tho! That might be useful later down the road! – MTAG11 Nov 01 '12 at 19:30
  • @MTAG11: Look in [the answer](http://stackoverflow.com/a/7084920/315935) where I describe *why* `$('#grid')[0].rows[i].cells[j]` provide you the most quick access to the `` element of the cells. The same method uses `getCol`. You should not forget additionally to skip the first row of the grid having class `jqgfirstrow` having height 0. – Oleg Nov 01 '12 at 22:29