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

Posted 2023-05-09

【中文标题】如果值在数组中，则隐藏表数据

【英文标题】：Hide table data if value is in an array

【发布时间】：2021-09-09 05:17:18

【问题描述】：

如果 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()
        
    )

这里是 Codepen：https://codepen.io/Xteripus/pen/yLMmZqw?editors=1111

【参考方案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>

【参考方案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>

【讨论】：

非常感谢你的作品就像一个魅力，但它看起来像魔法，对我来说太复杂了。有什么建议来学习这种力量吗？

当然，jQuery 和 MDN JS 文档非常详尽。您可以谷歌每个方法名称以获取其功能的完整描述。 each(), toggle(), indexOf(), parseInt()

非常感谢，我会谷歌所有的。

【参考方案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") 它将允许多个匹配项。

【参考方案4】：

const arr=[22,23,24,25];
document.querySelectorAll(".weeknd")
  .forEach(td=>td.style.visibility=arr.includes(+td.textContent)?"hidden":"visible");

<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>