У меня есть таблица, которая создается динамически, что мне нужно извлечь данные из jQuery. Я могу получить элемент таблицы с помощью javascript, но не могу понять, как выполнять итерацию по строкам для извлечения данных. Я включил образец данных таблицы и код, который у меня есть.Извлечь данные из таблицы HTML с помощью JQuery
образца Таблица
<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 никогда не заполняется. Любые предложения или руководство оценили.
Использование RegEx для выбора элемента является сомнительным, почему бы не использовать подстановочный знак? то есть: 'var matches = $ ('[id * ="' + name + '"]');' [Docs] (https://api.jquery.com/attribute-contains-selector/) – faino
@faino - Почему использование RegEx вызывает сомнения? – Dreampoet
Ну, по нескольким причинам; [этот пост приходит на ум] (http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags), но простыми словами: синтаксический анализ (X) HTML с RegEx не так эффективен и точен, как использование дерева DOM (https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) для [«ходьбы» по таблице] (https: //developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces). – faino