如果值在数组中，则隐藏表数据

Question

如果TD的值位于我指定的数组中，则我试图将TD隐藏在表上。

<table border="1">
    <tr class="tr-2">
        <td class="weeknd">22</td>
        <td class="weeknd">23</td>
        <td class="weeknd">24</td>
        <td class="weeknd">25</td>
        <td class="weeknd">26</td>
    </tr>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="main.js"></script>

和剧本

    const myarray = [22,23,24,25];
    var weeknd = Array();


    $(myarray).each(function(i) {
        console.log(myarray[i])
    })

    $(".weeknd").each(function(index, i){
       weeknd[index] = $(this).text();
        if(weeknd[index] == myarray[i]){
            $(this).hide()
        }
    })

这是代码库：https://codepen.io/Xteripus/pen/yLMmZqw?editors=1111

Answer 1

您可以使用Array#includes检查内容是否在myarray中。

​

const myarray = [22,23,24,25];

$(".weeknd").each(function() {
   if(myarray.includes(+$(this).text())) $(this).hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table border="1">
  <tr class="tr-2">
    <td class="weeknd">22</td>
    <td class="weeknd">23</td>
    <td class="weeknd">24</td>
    <td class="weeknd">25</td>
    <td class="weeknd">26</td>
  </tr>
</table>

​

Answer 2

要实现所需的目标，您可以遍历每个td并使用toggle()根据indexOf()的结果隐藏/显示它们，将td文本与数组中的值进行比较。试试这个：

​

const myarray = [22, 23, 24, 25];

jQuery($ => {
  $('.weeknd').each((i, el) => $(el).toggle(myarray.indexOf(parseInt(el.textContent, 10)) === -1));
});  

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr class="tr-2">
    <td class="weeknd">22</td>
    <td class="weeknd">23</td>
    <td class="weeknd">24</td>
    <td class="weeknd">25</td>
    <td class="weeknd">26</td>
  </tr>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

​

Answer 3

最好的方法是在HTML中添加一些简单的索引，如下所示：

<table border="1">
    <tr class="tr-2">
        <td id="weeknd22" class="weeknd">22</td>
        <td id="weeknd23" class="weeknd">23</td>
        <td id="weeknd24" class="weeknd">24</td>
        <td id="weeknd25" class="weeknd">25</td>
        <td id="weeknd26" class="weeknd">26</td>
    </tr>
</table>

这使得通过这样做可以很容易地隐藏数组中的那些

const myarray = [22,23,24,25];

    myarray.forEach(function(e){
    
        var el = document.getElementById("weeknd"+e);
        if (el) el.style.display="none";
    
    })

我使用了普通的旧JavaScript，因为它显示了您是多么容易做到这一点。当然，您可以使用jQuery并修改我所使用的原则。

例如，如果您不想使用ID(或者您有多个相同号码的TD)，您可以添加一个类，例如.weeknd22，并将其用作Dom中的查找引用，以找到匹配的TD。如果使用.querySelectorAll(".weeknd22")，它将允许多个匹配。