代码之家 › 专栏 › 技术社区 › wuk986

如果id在带有jquery的数组中,则显示表行

html-table arrays jquery

wuk986 · 技术社区 · 6 年前

我有以下问题,我不知道如何解决。

我有一个下拉菜单和一个表,如果下拉菜单中的一项被选中,那么表应该只显示这个组中的元素。

数据来自外部服务,将通过调用 vehicleShowHide(); 和 refreshTable(); (获取表数据并创建表)。

我创建了一个带有id的数组,现在我想将数组中的id与表中的ids进行比较,以便只显示结果并隐藏其他结果。

下拉列表:

<select class="custom-select custom-select-sm" onchange="showVehicleGroup(value)">
    <option value="" selected="">Alle Gorups</option>
    <option value="1-44060-041414BE3">Alle Vehicleâ(101)</option>
    <option value="1-44060-5211861A0">Group1â(42)</option>
    <option value="1-44060-477E11472">Group2â(3)</option>
    <option value="1-44060-4774E43D7">Group4â(23)</option>
    <option value="1-44060-288B143F2">Group5â(3)</option>
    <option value="1-44060-730090EA1">Group6â(6)</option>
</select>

表(简化):

<table id="vehicleTable" class="table table-hover table-sm">
<thead>
</thead>
  <tbody id="vehicleTableBody">
      <tr id="102">
          <td>Text</td>
      </tr>
      <tr id="103">
          <td>Text</td>
      </tr>
      <tr id="104">
          <td>Text</td>
      </tr>
      <tr id="105">
          <td>Text</td>
      </tr>
      <tr id="106">
          <td>Text</td>
      </tr>
  </tbody>
</table>

jquery:查询:

function showVehicleGroup(value) {

if (groupFilterArray.length === 0) {
    // do nothing
} else {
    groupFilterArray = [];
}

$(vehicleObjectsArray).each(function(key, element) {

    if (element.objectgroupuid === value) {

        groupFilterObject = element.objectno

        groupFilterArray.push(groupFilterObject);

    } else {
        // do nothing
    }
});

vehicleShowHide();
}

function vehicleShowHide() {

groupFilterArray = [ "103", "105", "106" ];

$('#vehicleTable').each(function() {

 // here I do not know how to compare the groupFilterArray with the table rows by id
    if () {
        $('#vehicleTable tbody tr#id').show();
    } else {
        $('#vehicleTable tbody tr').hide();
    }

});

外部JSON(提取):

[
 {
  "objectgroupname": "Group1",
  "objectno": "102",
  "objectname": "xxxxx",
  "objectuid": "1-44060-53078611D",
  "objectgroupuid": "1-44060-041414BE3"
 },
 {
  "objectgroupname": "Group2",
  "objectno": "103",
  "objectname": "xxxxx",
  "objectuid": "1-44060-3236707EF",
  "objectgroupuid": "1-44060-477E11472"
 }
]

1 回复 | 直到 6 年前

Jacob Nelson 6 年前

你可以用 indexOf 方法和循环也要更改。

IE;

 var groupFilterArray = [ "103", "105", "104" ];
 $('#vehicleTable #vehicleTableBody tr').each(function() {

    var rowId = $(this).attr("id");
        if (groupFilterArray.indexOf(rowId) != -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

试试这个代码,让我们知道它是否有效。这就是工作 fiddle 下面是一个代码片段,您可以执行它并看到结果。

 var groupFilterArray = [ "103", "105", "106" ];
 $('#vehicleTable #vehicleTableBody tr').each(function() {
    
    var rowId = $(this).attr("id");
        if (groupFilterArray.indexOf(rowId) != -1) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="vehicleTable" class="table table-hover table-sm">
<thead>
</thead>
  <tbody id="vehicleTableBody">
      <tr id="102">
          <td>Text 102</td>
      </tr>
      <tr id="103">
          <td>Text 103</td>
      </tr>
      <tr id="104">
          <td>Text 104</td>
      </tr>
      <tr id="105">
          <td>Text 105</td>
      </tr>
      <tr id="106">
          <td>Text 106</td>
      </tr>
  </tbody>
</table>