Javascript 更改表格行显示属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2548713/
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
Change table row display property
提问by SiberianGuy
I have an html page with a table that contains a hidden row:
我有一个包含隐藏行的表格的 html 页面：
<table>
<tr id="hiddenTr" style="display:none">
...
</tr>
</table>
I need to make it visible at client side using jquery. I tried this
我需要使用 jquery 使其在客户端可见。我试过这个
$('#hiddenTr').show();
and this
和这个
$('#hiddenTr').css('display', 'table-row');
Both implementations don't work for me. Furthemore the second one is not crossbrowser.
这两种实现都不适合我。此外，第二个不是跨浏览器。
UPD.Sorry, guys. That was my fault: I mistyped tr element id. That's strange $('hiddenTr') didn't return null...
更新。对不起大家。那是我的错：我打错了 tr 元素 ID。这很奇怪 $('hiddenTr') 没有返回 null ...
回答by Ray
I always set the style.display property to "" (empty string) to show a hidden table row:
我总是将 style.display 属性设置为 ""（空字符串）以显示隐藏的表格行：
var row = document.getElementById('row_id');
row.style.display = ""; // shows the row
To hide it again:
再次隐藏它：
row.style.display = "none"; // hides the row
in jQuery , this would be:
在 jQuery 中，这将是：
$("#row_id").css("display", ""); // show the row
or
或者
$("#row_id").css("display", "none"); // hides the row
IE doesn't seem to like the 'table-row' value for display. And 'block' is not correct, and it seems to screw up the display in other browsers sometimes.
IE 似乎不喜欢用于显示的 'table-row' 值。而且'block'是不正确的，它似乎有时会在其他浏览器中搞砸显示。
回答by Bradley Mountford
The first one should work. Are you wrapping it in $(document).ready(function(){}); ?
第一个应该工作。你把它包装在 $(document).ready(function(){}); ?
$(document).ready(function(){
$('#hiddenTr').show();
});
回答by Quasipickle
You could try setting display:auto, but honestly, I've had nothing but trouble manually setting the display property for table rows/cells.
您可以尝试设置display:auto，但老实说，除了手动设置表格行/单元格的显示属性之外，我什么都没有。
What I've found usually works is creating a CSS class called "hidden" that has display:none. Rather than show()ing, I just remove that class.
我发现通常有效的是创建一个名为“隐藏”的 CSS 类，它具有display:none. 而不是 show()ing，我只是删除了那个类。
回答by Vidar Vestnes
tried ?
试过？
$('#hiddenTr').css('display','block');
Also, you should put in a <TD></TD>with something in it, at least a so the row is not collapsed by your browser client. Diffrent clients behave diffrently...
此外，您应该在其中放入 a <TD></TD>，至少 a 以便您的浏览器客户端不会折叠该行。不同的客户表现不同...
回答by Sanu
You can try this code.
你可以试试这个代码。
CSS style
CSS样式
<style>
.hiddenTr {display: none;}
</style>
HTML Table Content
HTML 表格内容
<table>
<tr class="hiddenTr">
<td>Hidden Table Row</td>
</tr>
<tr><td>Table Row</td></tr>
<tr><td>Table Row</td></tr>
</table>
HTML button code
HTML 按钮代码
<button onclick="myFunction()">Click Me</button>
Include jQuery CDN
包含 jQuery CDN
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Create a custom javascript function
创建自定义 javascript 函数
<script>
function myFunction() {
$('.hiddenTr').toggle();
};
</script>
