Html 使用 <div style="display:none"> 隐藏表格数据
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6910349/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
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 div
elements can't be direct descendants of table
elements, the way I know to do this is to apply the CSS rules you want to each tr
element 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 class
instead 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 div
tags between tr
tags. You have to look for some other strategies like creating a CSS class with display: none
and adding it to concerning rows or adding inline style display: none
to 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>