javascript - HTML 表 : border-collapse and visibility collapse of 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(基于单选输入字段)中，我想通过添加 visibility:collapse 来删除(例如)#line3，例如:

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 那样。当然我可以删除/读取样式元素，但应该有不同的方法来解决这个问题？!

Answer 1

Of course I could remove/readd the style element

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

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

[1] https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering不是很清楚，但看起来规范规定了您不想要的行为。 chrome 和 firefox 在 vi​​sibility:collapse 情况下的行为有点不同。 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>