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

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

<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元素上的border元素？我该如何解决该问题？

编辑：我想保持这样的javascript。当然，我可以删除/阅读样式元素，但是应该有其他解决方法吗？

最佳答案

我当然可以删除/阅读样式元素


我认为这意味着您不想在更改行的可见性时弄乱border-top属性，对吗？

在这种情况下，您似乎唯一的选择是使用display:none而不是visibility:collapse [1]，这很不幸，因为这样您的表可能具有visibility:collapse旨在防止的不稳定效果。

[1] https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering不清楚，但是看起来像规范中规定了您不需要的行为。在可见性：崩溃的情况下，chrome和Firefox的行为略有不同。 https://jsfiddle.net/dgrogan/gLqo9s4w/2

let visible = 1;
toggle.onclick = function() {
  line3.style.visibility = visible ? "collapse" : "visible";
//line3.style.display = visible ? "none" : "table-row";
  visible = !visible;
}

   table {
     border-collapse: collapse;
   }

td {
  border: 1px solid lime;
}

   #line3 {
     border-top: 2px solid black;
   }

<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>

<br><br>
<button id=toggle>toggle</button>
<P>
https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering
</P>

关于javascript - HTML表:tr的边框折叠和可见性折叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54910020/