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

編碼愉快！