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 — faino
– faino, Commented Mar 18, 2016 at 0:34
Well, for a couple of reasons; this post comes to mind, but in simple terms: parsing (X)HTML with RegEx is not nearly as efficient and accurate as using the DOM tree to "walk" through the table. — faino
– faino, Commented Mar 20, 2016 at 1:32
Thanks for the recommendation. I modified my code to use wildcard selectors. — Dreampoet
– Dreampoet, Commented Mar 31, 2016 at 21:09

Tracysss · Accepted Answer · 2016-03-18 00:30:38Z

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, 2016 at 0:30

Tracysss

6045 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dreampoet Over a year ago

Thanks this lead me to the resolution I needed.

Dreampoet · Accepted Answer · 2016-03-31 21:16:11Z

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, 2016 at 21:16

Dreampoet

721 silver badge7 bronze badges

Collectives™ on Stack Overflow

Pull Data From HTML Table Using JQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related