javascript - 显示和隐藏不存在的元素

Question

我正在尝试隐藏所有未选择类型的 tr。 我设法向他们展示了。如何隐藏其他的？

changeTableType();

$('#type').change(function() {
 changeTableType();
});

function changeTableType() {
 var type = $('#type').val();
  console.log(type);
  $('.' + type).closest('tr').show();
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<select class="form-control" name="type" id="type">
    <option>UI</option>
    <option>TELLER</option>
    <option>PROFILE</option>
</select>


<table class="table center-aligned-table table-striped dataTable no-footer" id="dataTable" role="grid" aria-describedby="dataTable_info">
  <thead>
    <tr role="row">
      <th class="text-center select-checkbox sorting_disabled" rowspan="1" colspan="1" aria-label="&amp;nbsp;" style="width: 55px;">&nbsp;</th>
      <th class="text-center sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 359px;">Name</th>
      <th class="text-center sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 234px;">Type</th>
      <th class="text-center sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Creation Date: activate to sort column ascending" style="width: 459px;">Creation Date</th>
      <th class="text-center sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Created By: activate to sort column ascending" style="width: 345px;">Created By</th>
      <th class="text-center sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending" style="width: 586px;">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center odd" role="row">
      <td class=" select-checkbox"></td>
      <td class="sorting_1">2erw</td>
      <td class="UI">UI</td>
      <td>05/01/2018 15:17:33</td>
      <td>admin</td>
      <td>
        <button type="button" class="btn btn-primary-outline" id="viewTestCase-2erw" name="2erw">View</button>
        <button type="button" class="btn btn-danger-outline" id="delete-2erw" name="2erw">Delete</button>
      </td>
    </tr>
    <tr class="text-center even" role="row">
      <td class=" select-checkbox"></td>
      <td class="sorting_1">czxcz</td>
      <td class="UI">UI</td>
      <td>05/01/2018 15:16:45</td>
      <td>admin</td>
      <td>
        <button type="button" class="btn btn-primary-outline" id="viewTestCase-czxcz" name="czxcz">View</button>
        <button type="button" class="btn btn-danger-outline" id="delete-czxcz" name="czxcz">Delete</button>
      </td>
    </tr>
    <tr class="text-center odd" role="row">
      <td class=" select-checkbox"></td>
      <td class="sorting_1">czxczxcz</td>
      <td class="UI">UI</td>
      <td>05/01/2018 15:10:06</td>
      <td>admin</td>
      <td>
        <button type="button" class="btn btn-primary-outline" id="viewTestCase-czxczxcz" name="czxczxcz">View</button>
        <button type="button" class="btn btn-danger-outline" id="delete-czxczxcz" name="czxczxcz">Delete</button>
      </td>
    </tr>
    <tr class="text-center even" role="row">
      <td class=" select-checkbox"></td>
      <td class="sorting_1">da</td>
      <td class="UI">UI</td>
      <td>05/01/2018 15:20:12</td>
      <td>admin</td>
      <td>
        <button type="button" class="btn btn-primary-outline" id="viewTestCase-da" name="da">View</button>
        <button type="button" class="btn btn-danger-outline" id="delete-da" name="da">Delete</button>
      </td>
    </tr>
    <tr class="text-center odd" role="row">
      <td class=" select-checkbox"></td>
      <td class="sorting_1">fbffgb</td>
      <td class="UI">UI</td>
      <td>05/01/2018 15:21:13</td>
      <td>admin</td>
      <td>
        <button type="button" class="btn btn-primary-outline" id="viewTestCase-fbffgb" name="fbffgb">View</button>
        <button type="button" class="btn btn-danger-outline" id="delete-fbffgb" name="fbffgb">Delete</button>
      </td>
    </tr>
    <tr class="text-center even" role="row">
      <td class=" select-checkbox"></td>
      <td class="sorting_1">profilesadasd</td>
      <td class="PROFILE">PROFILE</td>
      <td>05/01/2018 15:03:31</td>
      <td>admin</td>
      <td>
        <button type="button" class="btn btn-primary-outline" id="viewTestCase-profilesadasd" name="profilesadasd">View</button>
        <button type="button" class="btn btn-danger-outline" id="delete-profilesadasd" name="profilesadasd">Delete</button>
      </td>
    </tr>
    <tr class="text-center odd" role="row">
      <td class=" select-checkbox"></td>
      <td class="sorting_1">sdad</td>
      <td class="UI">UI</td>
      <td>05/01/2018 15:09:12</td>
      <td>admin</td>
      <td>
        <button type="button" class="btn btn-primary-outline" id="viewTestCase-sdad" name="sdad">View</button>
        <button type="button" class="btn btn-danger-outline" id="delete-sdad" name="sdad">Delete</button>
      </td>
    </tr>
    <tr class="text-center even" role="row">
      <td class=" select-checkbox"></td>
      <td class="sorting_1">tellerdasdasdas</td>
      <td class="TELLER">TELLER</td>
      <td>05/01/2018 15:03:16</td>
      <td>admin</td>
      <td>
        <button type="button" class="btn btn-primary-outline" id="viewTestCase-tellerdasdasdas" name="tellerdasdasdas">View</button>
        <button type="button" class="btn btn-danger-outline" id="delete-tellerdasdasdas" name="tellerdasdasdas">Delete</button>
      </td>
    </tr>
    <tr class="text-center odd" role="row">
      <td class=" select-checkbox"></td>
      <td class="sorting_1">xczxcxzc</td>
      <td class="UI">UI</td>
      <td>05/01/2018 15:21:31</td>
      <td>admin</td>
      <td>
        <button type="button" class="btn btn-primary-outline" id="viewTestCase-xczxcxzc" name="xczxcxzc">View</button>
        <button type="button" class="btn btn-danger-outline" id="delete-xczxcxzc" name="xczxcxzc">Delete</button>
      </td>
    </tr>
    <tr class="text-center even" role="row">
      <td class=" select-checkbox"></td>
      <td class="sorting_1">xzxc</td>
      <td class="UI">UI</td>
      <td>05/01/2018 14:56:44</td>
      <td>admin</td>
      <td>
        <button type="button" class="btn btn-primary-outline" id="viewTestCase-xzxc" name="xzxc">View</button>
        <button type="button" class="btn btn-danger-outline" id="delete-xzxc" name="xzxc">Delete</button>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

您需要否定来检查特定属性，然后使用函数hide。

下面是代码示例:

$( "tr[type!='selected']" ).hide();

这是link关于 jQuery 中的否定的官方文档