如何根据内容中的过滤器号隐藏表？

Posted 2021-05-07

我在隐藏表格时遇到问题，请按照类别/机柜号在100-199和400-499的范围内。

下面是我的示例代码来描述，这些示例有3个表，如何检测Category / Cabinet中的100-199范围和400-499范围然后隐藏该表：

<table id="noshow">
  <tr>
    <th>Test 1</th>
    <th>Test 2</th>
  </tr>
  <tr>
    <td>Title</td>
    <td>ABC</td>
  </tr>
  <tr>
    <td>Reference No.</td>
    <td>123456</td>
  </tr>
  <tr>
    <td>Date</td>
    <td>28-05-2020</td>
  </tr>
  <tr>
    <td>Category/Cabinet</td>
    <td>187-1-PENTADBIRAN</td>
  </tr>
  <tr>
    <td>Subcategory/Folder</td>
    <td>187-1-1-PENTADBIRAN/PERUNDANGAN</td>
  </tr>
</table>
<br><br>

<table id="noshow">
  <tr>
    <th>Test 3</th>
    <th>Test 4</th>
  </tr>
  <tr>
    <td>Title</td>
    <td>DEF</td>
  </tr>
  <tr>
    <td>Reference No.</td>
    <td>123</td>
  </tr>
  <tr>
    <td>Date</td>
    <td>27-05-2020</td>
  </tr>
  <tr>
    <td>Category/Cabinet</td>
    <td>356-1-PENTADBIRAN</td>
  </tr>
  <tr>
    <td>Subcategory/Folder</td>
    <td>356-1-1-PENTADBIRAN/PERUNDANGAN</td>
  </tr>
</table>

<br><br>

<table id="noshow">
  <tr>
    <th>Test 5</th>
    <th>Test 6</th>
  </tr>
  <tr>
    <td>Title</td>
    <td>GHI</td>
  </tr>
  <tr>
    <td>Reference No.</td>
    <td>8888</td>
  </tr>
  <tr>
    <td>Date</td>
    <td>23-05-2020</td>
  </tr>
  <tr>
    <td>Category/Cabinet</td>
    <td>466-1-PENTADBIRAN</td>
  </tr>
  <tr>
    <td>Subcategory/Folder</td>
    <td>466-1-1-PENTADBIRAN/PERUNDANGAN</td>
  </tr>
</table>

我已经在javascirpt下面使用它来解决，但是无法隐藏该表：

 $(document).ready(function(){
        $('#noshow').each(function(k,v){
             var number=$(v).text().split('-')[0];
            console.log(number,$(v).text());
            if((number >= 100 && number <= 199)||(number >= 400 && number <= 499)){
                console.log("remove");
               $(v).remove();
            }
        });
    });

我的输出如下图所示：

如果成功，结果仅留在100-199范围和400-499范围内，如下图所示表：

[如果可能的话，可以使用javascript函数隐藏数据？希望有人可以指导我如何根据类别/机柜号在100-199和400-499的范围内隐藏表格。谢谢。

答案

尝试一下

$('.noshow tr td').each(function (k, v) {
    var title = $(v).text();
    if (title === 'Category/Cabinet') {
        var number = parseInt($(this).next().text().split('-')[0])
        if ((number >= 100 && number <= 199) || (number >= 400 && number <= 499)) {
            $(this).closest('.noshow').remove();
        }
    }
});

也将noShow更改为class而不是id，因为我们在dom中不应有多个同名的id

这里是工作jsfiddle