显示和隐藏不是的元素

时间：2018-01-05 16:09:25

标签： javascript jquery

我正在尝试隐藏所有没有选择类型的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>

3 个答案:

答案 0 :(得分：1)

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

以下是代码示例：

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

以下是jQuery

中有关否定的官方文档的link

答案 1 :(得分：0)

Vanilla.JS 

document.querySelector('#type').addEventListener( "change", changeTableType );

function changeTableType( event ){
    var type = document.querySelector("#type").value;
    var $$toShow = document.querySelectorAll( "#dataTable tr:has(> td." + type + ")" );
    var $$toHide = document.querySelectorAll( "#dataTable tr:has(> td:not(." + type + "))" );

    $$toShow.forEach( function( $el ){ 
        $( $el ).show();
    });

    $$toHide.forEach( function( $el ){ 
        $( $el ).hide();
    });
}

document.querySelector('#type').dispatchEvent( new Event( "change" ) );

JQuery的

$('#type').change( changeTableType );

function changeTableType( event ){

    var type = $("#type").val();
    var toShow = $( "#dataTable tr:has(> td." + type + ")" );
    var toHide = $( "#dataTable tr:has(> td:not(." + type + "))" );

    toShow.each( function( el ){ 
        $( el ).show();
    });

    toHide.each( function( el ){ 
        $( el ).hide();
    });
}

$('#type').trigger( "change" );

答案 2 :(得分：0)

只需添加$("tbody tr").hide();即可隐藏表格内的所有行...然后显示符合选择范围的行。

）

＆＃13;
＆＃13; 
changeTableType();

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

function changeTableType() {
 var type = $('#type').val();
  console.log(type);
  $("tbody tr").hide();
  $('.' + type).closest('tr').show();
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题