Pull Data From HTML Table Using JQuery

Question

I have table that is created dynamically that I need to pull data from using jQuery. I can get the table element using javascript but can't figure out how to iterate through the rows to retrieve the data. I've included a sample of the table data and the code I have so far.

Sample Table

    <table class="dnnGrid" cellspacing="0" cellpadding="0" id="dnn_ctr918_ViewRevindexStorefrontConfirmation_ctl00_SalesOrderDetailReceiptGridView"
    style="width:100%;border-collapse:collapse;">
        <tr class="dnnGridHeader">
            <th align="left" scope="col" abbr="Item">Item</th>
            <th align="left" scope="col" abbr="Quantity">Quantity</th>
        </tr>
        <tr class="dnnGridItem">
            <td>
                <a id="dnn_ctr918_ViewRevindexStorefrontConfirmation_ctl00_SalesOrderDetailReceiptGridView_GalleryHyperLink_0" class="rvdsfCartGalleryThumbnail"
                style="display:inline-block;border-style:None;"></a>
                <div class="rvdsfCartProduct">
                    <a id="dnn_ctr918_ViewRevindexStorefrontConfirmation_ctl00_SalesOrderDetailReceiptGridView_ProductNameHyperLink_0" class="mcPname">Canvas - 24.00 X 36.00 X 1.50"</a>
                    <dl class="rvdsfDynamicFormResults">
                        <dt>ProjectID</dt>
                        <dd>#######</dd>
                    </dl>
                </div>
            </td>
            <td style="width:120px;">1</td>
        </tr>
        <tr class="dnnGridAltItem">
            <td>
                <a id="dnn_ctr918_ViewRevindexStorefrontConfirmation_ctl00_SalesOrderDetailReceiptGridView_GalleryHyperLink_1" class="rvdsfCartGalleryThumbnail"
                style="display:inline-block;border-style:None;"></a>
                <div class="rvdsfCartProduct">
                    <a id="dnn_ctr918_ViewRevindexStorefrontConfirmation_ctl00_SalesOrderDetailReceiptGridView_ProductNameHyperLink_1" class="mcPname">Canvas - 11.00 X 16.00 X 0.75"</a>
                    <dl class="rvdsfDynamicFormResults">
                        <dt>ProjectID</dt>
                        <dd>#######</dd>
                    </dl>
                </div>
            </td>
            <td style="width:120px;">1</td>
        </tr>
        <tr class="dnnGridItem">
            <td>
                <a id="dnn_ctr918_ViewRevindexStorefrontConfirmation_ctl00_SalesOrderDetailReceiptGridView_GalleryHyperLink_2" class="rvdsfCartGalleryThumbnail"
                style="display:inline-block;border-style:None;"></a>
                <div class="rvdsfCartProduct">
                    <a id="dnn_ctr918_ViewRevindexStorefrontConfirmation_ctl00_SalesOrderDetailReceiptGridView_ProductNameHyperLink_2" class="mcPname">Canvas - 10.00 X 8.00 X ThinFloat</a>
                    <dl class="rvdsfDynamicFormResults">
                        <dt>ProjectID</dt>
                        <dd>#######</dd>
                    </dl>
                </div>
            </td>
            <td style="width:120px;">2</td>
        </tr>
        <tr class="dnnGridAltItem">
            <td>
                <a id="dnn_ctr918_ViewRevindexStorefrontConfirmation_ctl00_SalesOrderDetailReceiptGridView_GalleryHyperLink_3" class="rvdsfCartGalleryThumbnail"
                style="display:inline-block;border-style:None;"></a>
                <div class="rvdsfCartProduct">
                    <a id="dnn_ctr918_ViewRevindexStorefrontConfirmation_ctl00_SalesOrderDetailReceiptGridView_ProductNameHyperLink_3" class="mcPname">Poster - 6.00 X 8.00</a>
                    <dl class="rvdsfDynamicFormResults">
                        <dt>ProjectID</dt>
                        <dd>#######</dd>
                    </dl>
                </div>
            </td>
            <td style="width:120px;">5</td>
        </tr>
        <tr class="dnnGridItem">
            <td>
                <a id="dnn_ctr918_ViewRevindexStorefrontConfirmation_ctl00_SalesOrderDetailReceiptGridView_GalleryHyperLink_4" class="rvdsfCartGalleryThumbnail"
                style="display:inline-block;border-style:None;"></a>
                <div class="rvdsfCartProduct">
                    <a id="dnn_ctr918_ViewRevindexStorefrontConfirmation_ctl00_SalesOrderDetailReceiptGridView_ProductNameHyperLink_4" class="mcPname">Poster - 24.00 X 36.00</a>
                    <dl class="rvdsfDynamicFormResults">
                        <dt>ProjectID</dt>
                        <dd>#######</dd>
                    </dl>
                </div>
            </td>
            <td style="width:120px;">8</td>
        </tr>
    </table>

Javascript

    /// <reference path="https://code.jquery.com/jquery-1.9.1.js" />
    /// <reference path="https://code.jquery.com/ui/1.10.3/jquery-ui.js" />
    /// <reference path="typings/jquery/jquery.d.ts" />

var orderNumberFieldName = "OrderNumberReceiptLabel";
var totalCostFieldName = "TotalReceiptLabel";
var shippingCostFieldName = "ShippingReceiptLabel";
var shippingInformation = "ShipToReceiptLabel";
var lineItemTable = "SalesOrderDetailReceiptGridView";
var taxFieldName = "TaxesReceiptLabel";
var subtotalFieldName = "SubTotalReceiptLabel";
var shippingParsed = false;
var lineItemsParsed = false;
var lineItems = [];
var shippingFirstName = "";
var shippingLastName = "";
var shippingPostalCode = "";
var shippingEmailAddress = "";
var shippingCity = "";
var shippingState = "";
var shippingAddress = "";

var lineItemTable = "SalesOrderDetailReceiptGridView";

///Uses a regular expression to locate the RevIndex field information.
var getElement = function(name) {

    if (name == "SalesOrderDetailReceiptGridView") {
        var regularExpression = new RegExp("^(\\w)*_ViewRevindexStorefrontConfirmation_(\\w)*_" + name + "_ProductNameHyperLink_(\\w)*$");
    }
    else {
        var regularExpression = new RegExp("^(\\w)*_ViewRevindexStorefrontConfirmation_(\\w)*_" + name + "$");
    }
    return $("*").filter(function() {
        return this.id.match(regularExpression);
    });
};

//Parses the line items within the order.
var parseLineItems = function () {

    if (!lineItemsParsed) {
        var lineItemTableElement = getElement(lineItemTable);
        lineItemTableElement.find("tr.dnnGridItem, tr.dnnGridAltItem").each(function (index, value) {
            lineItems.push(parseLineItem(index, value));
        });
        lineItemsParsed = true;
    }
};

//Parses a single line
var parseLineItem = function(index, lineItem) {
    var cellElements = $(lineItem).find("td");
    var lineItemValue = {};

    lineItemValue["ProductVariantId"] = parseUriForVariant($(cellElements[0]).find(".rvdsfCartGalleryThumbnail").attr("href"));
    lineItemValue["ProductName"] = $(cellElements[0]).find(".rvdsfCartProduct > a").html();
    lineItemValue["Price"] = parseFloat($(cellElements[1]).html().replace(/[^\d.-]/g, ""));
    lineItemValue["Quantity"] = parseFloat($(cellElements[2]).html());

    return lineItemValue;
};

I get the table element but can't figure out how to get the data from it. The lineItems array is never populated. Any suggestions or direction appreciated.

Using RegEx for the element selection is questionable, why not use the wildcard selector? ie: `var matches = $('[id*="' + name + '"]');` [Docs](https://api.jquery.com/attribute-contains-selector/) — faino, Mar 18 '16 at 00:34
Well, for a couple of reasons; [this post comes to mind](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags), but in simple terms: parsing (X)HTML with RegEx is not nearly as efficient and accurate as using the [DOM tree](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) to ["walk" through the table](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces). — faino, Mar 20 '16 at 01:32
Thanks for the recommendation. I modified my code to use wildcard selectors. — Dreampoet, Mar 31 '16 at 21:09

score 3 · Answer 1 · answered Mar 18 '16 at 00:30

3

You can iterate through the rows of the table with:

$('.dnnGrid tr').each(function() {
    var $row = $(this);

    // print out text from row
    console.log($row.text());

    // example: to get the contents of the anchor tag for this row:
    console.log($row.find('a').text());
});

answered Mar 18 '16 at 00:30

Tracysss

584
4
8

Thanks this lead me to the resolution I needed. – Dreampoet Mar 31 '16 at 21:18

score 0 · Accepted Answer · answered Mar 31 '16 at 21:16

0

I ended up changing the logic a little and standardizing the template that is being parsed. Using @Tracysss example code above I am able to iterate through the rows and pull the needed information.

answered Mar 31 '16 at 21:16

Dreampoet

72
1
7

Pull Data From HTML Table Using JQuery

2 Answers2