使用JQuery从HTML表中提取数据

Question

我有动态创建的表，我需要从使用jQuery中提取数据。 我可以使用javascript获取表元素，但无法弄清楚如何遍历行来检索数据。 我已经包含了表格数据的样本和我到目前为止的代码。

样本表

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

我得到了表元素，但无法弄清楚如何从中获取数据。 从不填充lineItems数组。 任何建议或方向表示赞赏。

Answer 1

您可以使用以下内容遍历表的行：

$('.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

我最终改变了逻辑并标准化了正在解析的模板。 使用上面的@Tracysss示例代码，我能够遍历行并提取所需的信息。