jQuery通过TD中的值在未选择的数据表中找到一行

Question

在“旧版”数据表中是否有一种有效的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值并爬到该行。

Answer 1

您可以在jquery中使用:contains选择器：

 $('td:contains(Another option)').parent('tr').css('background', 'red'); 

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

但是请注意，在我的示例中，这并不是完全匹配。 这是“包含”匹配。

如果您想将其更改为完全匹配，则可以使用以下方法：

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

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

Answer 2

好。 我离得很近。 您可以单击图像以查看其接近程度。 从技术上讲，Dekel的答案是正确的答案，因此我将在此处给出该答案的要点。 但是我发布这个答案只是为了防备别人发现自己像我一样困惑。

我试图获取该行，然后对它执行我想要的任何操作 （错误！），这仍然可能实现，但是我找到了我所寻找的更好的方法。

这是执行我想要的代码：

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

编码愉快！