Question

所以，我已经隐藏了这样的整个表格，这很好用：

<div style="display:none">
<table>
<tr><th>Test Table</th><tr>
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
</table>
</div>

但我想隐藏一组这样的行：

<table>
<tr><th>Test Table</th><tr>
<div style="display:none">
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
</div>
</table>

但这不起作用。任何提示？

Answer 1

只需将style属性应用于tr标记即可。对于多个tr标记，您必须将样式应用于每个元素，或将它们包装在tbody标记中：

<table>
  <tr><th>Test Table</th><tr>
  <tbody style="display:none">
    <tr><td>123456789</td><tr>
    <tr><td>123456789</td><tr>
    <tr><td>123456789</td><tr>
  </tbody>
</table>

Answer 2

不幸的是，由于div元素不能成为table元素的直接后代，我知道这样做的方法是将所需的CSS规则应用于每个tr元素你想把它应用到。

<table>
<tr><th>Test Table</th><tr>
<tr><td>123456789</td><tr>
<tr style="display: none; other-property: value;"><td>123456789</td><tr>
<tr style="display: none; other-property: value;"><td>123456789</td><tr>
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
</table>

如果要将多个CSS规则应用于相关行，请将适用的行改为class，然后将规则卸载到外部CSS。

<table>
<tr><th>Test Table</th><tr>
<tr><td>123456789</td><tr>
<tr class="something"><td>123456789</td><tr>
<tr class="something"><td>123456789</td><tr>
<tr><td>123456789</td><tr>
<tr><td>123456789</td><tr>
</table>

Answer 3

只需在要隐藏的元素上设置display：none：

<table>
<tr><th>Test Table</th><tr>
<tr style="display:none"><td>1. 123456789</td><tr>
<tr><td>2. 123456789</td><tr>
<tr><td>3. 123456789</td><tr>
</table>

Answer 4

<style type="text/css">
.hidden { display:none; }
</style>

<table>
<tr><th>Test Table</th><tr>
<tr class="hidden"><td>123456789</td></tr>
<tr class="hidden"><td>123456789</td></tr>
<tr class="hidden"><td>123456789</td></tr>
</table>

而不是：

<div style="display:none;">
<table>...</table>
</div>

你最好使用： ...

Answer 5

提供要隐藏的可用于隐藏的类名的所有行。使用javascript从不同的行添加/删除此类。

<table>
<tr><th>Test Table</th><tr>
<tr class="toHide"><td>123456789</td><tr>
<tr class="toHide"><td>123456789</td><tr>
<tr class="toHide"><td>123456789</td><tr>
</table>

CSS：

.toHide
{
 display: none;
}

Answer 6

不允许div代码之间包含tr个代码。您必须寻找其他一些策略，例如使用display: none创建CSS类并将其添加到相关行或向相关行添加内联样式display: none。

.hidden
{
  display:none;
}

<table>
  <tr><td>I am visible</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
  <tr class="hidden"><td>I am hidden using CSS class</td><tr>
</table>

或

<table> <tr><td>I am visible</td><tr> <tr style="display:none"><td>I am hidden using inline style</td><tr> <tr style="display:none"><td>I am hidden using inline style</td><tr> <tr style="display:none"><td>I am hidden using inline style</td><tr> </table>

Answer 7

将要隐藏的部分包裹在自己的tbody中，并动态显示/隐藏该部分。

Answer 8

是的，您只能隐藏要隐藏的行。如果要仅在当前显示的行中满足某些条件时显示行，这将非常有用。以下对我有用。

<table>
  <tr><th>Sample Table</th></tr>  
  <tr id="row1">
    <td><input id="data1" type="text" name="data1" /></td>
  </tr>
 <tr id="row2" style="display: none;">
    <td><input id="data2" type="text" name="data2" /></td>
 </tr>
 <tr id="row3" style="display: none;">
    <td><input id="data3" type="text" name="data3" /></td>
 </tr>
</table>

在CSS中，执行以下操作：

#row2{
    display: none;
}

#row3{
    display: none;
}

在JQuery中，您可能会有类似以下内容的内容来显示所需的行。

$(document).ready(function(){
    if($("#row1").val() === "sometext"){  //your desired condition
        $("#row2").show();
    }

    if($("#row2").val() !== ""){   //your desired condition
        $("#row3").show();
    }
});

Answer 9

最好不要使用<div>，而是使用<tr>（您要隐藏）ID，然后使用javascript隐藏它。

Answer 10

    

    /* add javascript*/
    {
    document.getElementById('abc 1').style.display='none';
    }
   /* after that add html*/
   
    <html>
    <head>
    <title>...</title>
    </head>
    <body>
    <table border = 2>
    <tr id = "abc 1">
    <td>abcd</td>
    </tr>
    <tr id ="abc 2">
    <td>efgh</td>
    </tr>
    </table>
    </body>
    </html>

Answer 11

您应该在要隐藏的style="display:none"中添加<tr>。

使用<div style =“display：none”> </div>隐藏表格数据

11 个答案: