我在隐藏和显示表格行时遇到了问题。我的代码大部分时间都在根据“隐藏”属性隐藏和显示表格行。这些元素被赋予一个属性,该属性获取“display:none”的 css,当通过 JS 删除该属性时,将恢复默认的“display:table-row”。然而,这仍然导致下表行中偶尔出现奇怪情况。更复杂的是,我似乎只在我的 5k iMac 屏幕上看到了问题,而不是在用作第二屏幕的常规显示器上看到了问题。有什么想法吗?
编辑
代码如下:
<table class="clauseTable">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th></th>
</tr>
</thead>
<tbody id="tagsTable">
<tr playbookid="670" id="6878" value="6878">
<td id="tagName">Name</td>
<td id="required" class="clauseTable--radioContainer required undefined">
</td>
<td id="rejected" class="clauseTable--radioContainer rejected undefined">
</td>
<td id="conditional" class="clauseTable--radioContainer conditional selected">
</td>
<td id="ignore" class="clauseTable--radioContainer ignore undefined ">
</td>
<td id="editBtn" class="editClauseBtn"></td>
</tr>
<tr id="tagsDescriptionsRow6878" class="conditional--row tagsDescriptionsRow" hidden="hidden">
<td colspan="6">
</td>
</tr>
</tbody>
</table>
还有 SCSS:
tr {
display: table-row;
&[hidden='hidden'] {
display: none;
}
}
最佳答案
我认为使用类而不是“隐藏”属性会更简单、更安全。
tr.hidden {
display: none;
}
代替
tr {
display: table-row;
&[hidden='hidden'] {
display: none;
}
}
关于html - 显示隐藏的表格行搞砸了表格的其余部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44107203/