JavaScript 显示=“块”；

Question

我有一些代码，当单击某些内容时会显示表格行。因此，该行的样式属性被禁用，如下所示：

HTML

<tr id='Asset' class='rrtr' style='display:none;'>

用户单击并触发 Javascript，效果很好：

Javascript

document.getElementById("Asset").style.display = 'block';

但是，该行的样式是' t 与其余部分一致，即使它的类属性像其他部分一样设置为“rrtr”。

如果我关闭“显示：无；”放在行上并运行它，显示格式正确。

有什么想法吗？

Answer 1

为了获得最佳兼容性，请将

document.getElementById("Asset").style.display = '';

Internet Explorer 7 及更低版本设置为不支持 table-row 作为 display 的值。或者，可以说，更好的想法是为行设置一个类，并使用 JS 删除/更改它：

<tr id='Asset' class='rrtr rrtr-hidden'>
<!-- .rrtr-hidden { display: none; } -->

// Remove class `.rrtr-hidden`
document.getElementById("Asset").className = 'rrtr';

Answer 2

您应该将显示值设置为table-row，而不是block。

Answer 3

将其设置为 table-row 或 ""

Answer 4

我通过添加/删除名为“隐藏”的类名来隐藏和显示表行。这种方法的优点是能够隐藏/显示任何元素，而无需知道或关心其正常显示样式是什么。对于表格行，这可能不是问题，但对于其他元素，您可能有一天希望从 block 更改为 inline。如果您使用类来隐藏元素，则无需更改 javascript。

在你的CSS中：

.hide {
   display:none;
}

在javascript中，

function hasClass(ele, cls) {
    if( ele != null && ele.className != null ) {
      return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    } else {
      return false;
    }
}

function addClass(ele, cls) {
    if (! hasClass(ele, cls)) {
      ele.className += " " + cls;
    }
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, '');
    }
}

那个JS来自SO上的其他人，但不幸的是我忘记保存链接。

因此，要隐藏元素 addClass( document.getElementById('Asset'), 'hide' ) 和 removeClass 来显示它。

编辑：我不知何故错过了安迪的回答。它本质上做同样的事情，但是，这些 addClass 和removeClass 方法比“手动”修改 element.className 更健壮一些。