Html 使用 <div style="display:none"> 隐藏表格数据

Hiding table data using <div style="display:none">

提问by joedborg

So, I've hidden whole tables like this, which works fine:

所以，我像这样隐藏了整个表格，效果很好：

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

But I want to hide just a group of rows like this:

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

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

But that doesn't work. Any hints?

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

回答by Ben Rowe

Just apply the style attribute to the tr tag. In the case of multiple tr tags, you will have to apply the style to each element, or wrap them in a tbody tag:

只需将 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>

回答by Delan Azabani

Unfortuantely, as divelements can't be direct descendants of tableelements, the way I know to do this is to apply the CSS rules you want to each trelement that you want to apply it to.

不幸的是，由于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>

If you have more than one CSS rule to apply to the rows in question, give the applicable rows a classinstead and offload the rules to external CSS.

如果您有多个 CSS 规则应用于相关行，请class改为提供适用的行 a并将规则卸载到外部 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>

回答by Petar Ivanov

Just set the display:none on the elements that you want to hide:

只需在要隐藏的元素上设置 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>

回答by kongr45gpen

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

And instead of:

而不是：

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

you had better use: ...

你最好使用：...

回答by Oded

Give all the rows you want to hide a class name that you can use for hiding. Use javascript to add/remove this class from the different rows.

为所有要隐藏的行指定一个可用于隐藏的类名。使用 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:

CSS：

.toHide
{
 display: none;
}

回答by Praveen Prasad

You are not allowed to have divtags between trtags. You have to look for some other strategies like creating a CSS class with display: noneand adding it to concerning rows or adding inline style display: noneto concerning rows.

div标签之间不允许有tr标签。您必须寻找其他一些策略，例如创建一个 CSS 类display: none并将其添加到相关行或将内联样式添加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>

or

或者

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

回答by Andrew

Wrap the sections you want to hide in their own tbody and dynamically show/hide that.

将您想要隐藏的部分包裹在它们自己的 tbody 中并动态显示/隐藏它。

回答by kmario23

Yes, you can hide only the rows that you want to hide. This can be helpful if you want to show rows only when some condition is satisfied in the rows that are currently being shown. The following worked for me.

是的，您只能隐藏要隐藏的行。如果您只想在当前显示的行中满足某些条件时才显示行，这会很有帮助。以下对我有用。

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

In CSS, do the following:

在 CSS 中，执行以下操作：

#row2{
    display: none;
}

#row3{
    display: none;
}

In JQuery, you might have something like the following to show the desired rows.

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

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

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

回答by Vinayak Shrivastava

Instead of using <div>, it would be better to use to provide the <tr>(which you want to hide) an id and then hiding it using javascript.

与其使用<div>，不如使用 提供<tr>（您想隐藏的）一个 id，然后使用 javascript 隐藏它。

回答by Vinayak Shrivastava

    


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