Jquery在td中按值在未选择的数据表中查找一行

时间:2017-08-22 21:21:51

标签: javascript jquery html datatable

在"遗产"中是否存在有效的jQuery方式?数据表找到一个包含我的搜索值的td,然后爬到行tr?

我可以使用$('#modalTable tbody').dataTable()[0].rows获取所有行,然后遍历所有行,但如果有的话,则更喜欢更有效的方法。

根据我在类似问题上找到的信息,这是我尝试过的屏幕截图:

enter image description here

我已经扩展了手表中的所有值。这个截屏非常小!您可能需要保存图像才能更好地查看。

可能重要的一点是此表是在弹出窗口中创建的。我想在弹出窗口打开时找到行,但数据已经加载到表中。这是代码:

//  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值并爬到行。

2 个答案:

答案 0 :(得分:0)

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

&#13;
&#13;
$('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;
&#13;
&#13;

  

但是请注意,在我的示例中,它并不完全匹配。它包含&#34;包含&#34;匹配。

如果您想将其更改为完全匹配,可以使用以下内容:

&#13;
&#13;
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;
&#13;
&#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

快乐的编码!