更改表行显示属性

Question

我有一个html页面，其中包含一个包含隐藏行的表：

<table>
  <tr id="hiddenTr" style="display:none">
    ...
  </tr>
</table>

我需要使用jquery在客户端显示它。我试过这个

$('#hiddenTr').show();

和这个

$('#hiddenTr').css('display', 'table-row');

这两种实现对我都不起作用。而且第二个不是交叉浏览器。

UPD。对不起，伙计们。这是我的错：我错误输入了tr元素id。奇怪的是$（'hiddenTr'）没有返回null ......

Answer 1

我总是将style.display属性设置为“”（空字符串）以显示隐藏的表格行：

var row = document.getElementById('row_id');
row.style.display = "";   // shows the row

再次隐藏它：

row.style.display = "none";   // hides the row

在jQuery中，这将是：

$("#row_id").css("display", ""); // show the row

或

$("#row_id").css("display", "none");  // hides the row

IE似乎不喜欢显示的'table-row'值。并且'阻止'不正确，有时它会在其他浏览器中搞砸显示器。

Answer 2

第一个应该有效。你把它包装在$（document）.ready（function（）{}）中; ？

$(document).ready(function(){
    $('#hiddenTr').show();
});

Answer 3

您可以尝试设置display:auto，但老实说，除了手动设置表格行/单元格的显示属性之外，我什么都没有。

我发现通常有用的是创建一个名为“hidden”的CSS类，其中包含display:none。而不是show（）ing，我只是删除那个类。

Answer 4

尝试了？

 $('#hiddenTr').css('display','block');

此外，您应该在<TD></TD>中添加一些内容，至少为 ，这样您的浏览器客户端就不会折叠该行。不同的客户表现得很差......

Answer 5

您可以尝试使用此代码。

CSS样式

<style>
.hiddenTr {display: none;}  
</style>

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 onclick="myFunction()">Click Me</button>

包括jQuery CDN

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

创建自定义javascript函数

<script>
function myFunction() {
    $('.hiddenTr').toggle();
};
</script>