在"遗产"中是否存在有效的jQuery方式?数据表找到一个包含我的搜索值的td,然后爬到行tr?
我可以使用$('#modalTable tbody').dataTable()[0].rows
获取所有行,然后遍历所有行,但如果有的话,则更喜欢更有效的方法。
根据我在类似问题上找到的信息,这是我尝试过的屏幕截图:
我已经扩展了手表中的所有值。这个截屏非常小!您可能需要保存图像才能更好地查看。
可能重要的一点是此表是在弹出窗口中创建的。我想在弹出窗口打开时找到行,但数据已经加载到表中。这是代码:
// Intitializes the select building table with new data
// and resets the DOM every time the "Add" button is clicked.
initSelectableBuildingTable = function () {
//If table exists destroy and reinitialize
var is_table = isDataTable(jQueryVar.jSelectableBuildingTable)
if (is_table) {
resetDatatable(jQueryVar.jSelectableBuildingTable);
}
jQueryVar.jSelectableBuildingTable.dataTable({
"bPaginate": false,
"bProcessing": true,
"bAutoWidth": true,
"aoColumns": [
{
"mDataProp": "Id", "bSortable": false, "mRender": function (data, type, row) {
var sHtml = '<input type="button" class="button small addSelectedBuilding" value="Add" data-id="' + row.AssetId + '"/>'
return sHtml;
},
"bUseRendered": false,
"sDefaultContent": ""
},
{ "mDataProp": "AssetName", "bSortable": true },
{ "mDataProp": "SqFoot", "bSortable": true },
{ "mDataProp": "Uid", "bSortable": true },
{ "mDataProp": "Category", "bSortable": true },
{ "mDataProp": "Location", "bSortable": true }
],
"aoColumnDefs": [
{ "mDataProp": null, "sDefaultContent": " ", "aTargets": [-1] }
],
"sDom": '<"top">rt<"bottom"><"clear">',
"oLanguage": {
"sEmptyTable": "No Meters found."
},
"sAjaxSource": $.baseURL("api/service/getassetsbyids"),
"fnServerData": function (sSource, aoData, fnCallback) {
var ids = stateMap.selectedSiteIds.toString();
var oData = { "ids": ids, "type": stateMap.selectedAssetType.toLowerCase() };
$.ajax({
url: sSource, // Do not add the base to this. It should already be present
type: "GET",
data: oData,
dataType: "json",
success: fnCallback,
complete: function () {
if (Info.model.getItemCount() > 0) {
disableAddButtonForSelectedItems();
}
}
});
}
});
}
也许有一些很酷的东西可以让我找到dt值并爬到行。
答案 0 :(得分:0)
您可以在jquery中使用:contains
选择器:
$('td:contains(Another option)').parent('tr').css('background', 'red');
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>This is my text</td>
<td>Some other text</td>
</tr>
<tr>
<td>Another option</td>
<td>This is what I'm looking for</td>
</tr>
<tr>
<td>And some row</td>
<td>Note this Another option row</td>
</tr>
</table>
&#13;
但是请注意,在我的示例中,它并不完全匹配。它包含&#34;包含&#34;匹配。
如果您想将其更改为完全匹配,可以使用以下内容:
var content_to_search = 'Another option'
$(`td:contains(${content_to_search})`).each(function() {
if ($(this).text() == content_to_search) {
$(this).parent('tr').css('background', 'red');
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>This is my text</td>
<td>Some other text</td>
</tr>
<tr>
<td>Another option</td>
<td>This is what I'm looking for</td>
</tr>
<tr>
<td>And some row</td>
<td>Note this Another option row</td>
</tr>
</table>
&#13;
答案 1 :(得分:0)
行。我很接近。您可以单击图像以查看距离有多近。从技术上讲,Dekel的答案是正确的答案,所以我要给出答案here。但我发布这个答案只是为了让别人发现自己像我一样困惑。
我试图获取行,然后执行我想要的任何操作(错误!),这可能仍然可能,但我找到了更好的方式,我正在寻找。
这是执行我想要的代码:
var ids = []; // These will come from user selection
ids.forEach(function (id)
jQueryVar.jBuildingTable.find('tr input[data-id="' + id + '"]') // Find row
.prop("disabled", true).addClass('secondary'); // perform action
快乐的编码!