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

我最終改變邏輯有點和規範正被解析的模板。 使用上面的@Tracysss示例代碼我可以遍歷行並獲取所需的信息。

Answer 2

您可以通過表與行迭代：

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