使用JQuery从HTML表中提取数据

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.

Answer 1

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());
});

Answer 2

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.