javascript - HTML表格：tr的边框折叠和可见性折叠

Question

我有一个多行的表，例如：

<table>
   <tr id="line1"><td>Line</td><td>1</td></tr>
   <tr id="line2"><td>Line</td><td>2</td></tr>
   <tr id="line3"><td>Line</td><td>3</td></tr>
</table>

现在，在javascript（基于无线电输入字段）中，我想#line3通过添加一个来删除（例如） visibility:collapse，例如：

document.getElementById("line3").style = "visibility:collapse";

特别之处#line3在于它有一个border-top：

<style>
   table {
      border-collapse: collapse;
   }
   #line3 {
     border-top:1px solid black;
   }
</style>

我遇到的问题是：当我“折叠”#line3时，边框仍然存在，即使元素“不存在”。我想这应该是由于border-collapse表格样式中的“继承”了前一个元素的边框tr元素？我该如何解决这个问题？

编辑：我想保持这样的javascript。当然我可以删除/读取样式元素，但应该有不同的方法来解决这个问题？！

标签： javascriptcsshtml-table

Answer 1

您是否尝试过“显示：无”？

     document.getElementById("line3").style = "display: none";

或者，也许您可​​以尝试将边框顶部设置为 0 以隐藏它。

    document.getElementById("line3").style = "visibility:collapse;border-top:0";