Question

我正在准备一个包含＆gt; 100个不同名称的html表，但我只想显示一些行。到目前为止，我使用javascript来隐藏＆＃34;一切然后＆＃34;显示＆＃34;对于那些我想在表中展示的人。有没有办法让脚本默认隐藏所有内容，然后使用＆＃34; show＆＃34;对于那些我想出现在决赛桌上的人？

这是一个基本例子的代码，只有5个不同的名字（John，Ida，Thor，Diana，Chris），我希望戴安娜和基督能够在这里展示。

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">

<script src="jquery/jquery-1.12.2.js"></script>

<table id="subtable">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody> 
        <tr>
            <td>John</td>       
        </tr>
        <tr>
            <td>Ida</td>
        </tr>
        <tr>
            <td>Thor</td>
        </tr>
        <tr>
            <td>Diana</td>  
        </tr>
        <tr>
            <td>Chris</td>
        </tr>
</table>


<script type="text/javascript"> 
$(document).ready( function() {

$('#subtable td:contains("John")').parents("tr").hide();
$('#subtable td:contains("Ida")').parents("tr").hide();
$('#subtable td:contains("Thor")').parents("tr").hide();
$('#subtable td:contains("Diana")').parents("tr").hide();
$('#subtable td:contains("Chris")').parents("tr").hide();

$('#subtable td:contains("Diana")').parents("tr").show();
$('#subtable td:contains("Chris")').parents("tr").show();

});
</script>       
</html>

Answer 1

有没有办法让脚本默认隐藏一切

通过应用隐藏内容的CSS类可以轻松完成：

.hidden { display:none; }

到所有行：

$("tr").addClass("hidden");

然后使用＆＃34; show＆＃34;对于那些我想出现在决赛桌中的人

使用JavaScript / JQuery完成行的显示，只需从这些元素中删除.hidden类，另一个类将它们标识为要显示的类。

<tr class="shown">

以下是一个例子：

＆＃13;

$("tr").addClass("hidden"); // Hide all rows
$("button[type='button']").on("click", function(){
  // Remove the hidden class from rows that have the "shown" class
  $(".shown").removeClass("hidden");
});

＆＃13;

/* Apply this class to elements that should be hidden */
.hidden { display:none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="subtable">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody> 
        <tr class="shown">
            <td>John</td>       
        </tr>
        <tr>
            <td>Ida</td>
        </tr>
        <tr class="shown">
            <td>Thor</td>
        </tr>
        <tr>
            <td>Diana</td>  
        </tr>
        <tr class="shown">
            <td>Chris</td>
        </tr>
</table>

<button type="button">Show Appropriate Rows</button>

＆＃13;

隐藏/显示表格行

1 个答案: