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（基于无线电输入字段）中，我想通过添加 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

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

我认为这意味着您不想在更改行的可见性时弄乱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>

Answer 2

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

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

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

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

Answer 3

.cssText

您可以使用.cssText 编辑整个内联[style] 属性：

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

这允许您在一行中设置visibility 和border 属性（如果需要，还可以设置更多属性）。

---

演示

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

table {
  border-collapse: collapse;
}

#line3 {
  border-top: 1px 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>

---

Answer 4

您有几种解决方案可以使用 Jquery：

$('#line1').hide();

//OR

$('#line1').css('visibility','collapse');

//OR

$('#line1').css('display','none');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

您也可以直接通过 getElementById 属性使用 Javascript：

document.getElementById("line1").style.display = "none";

或者

document.getElementById("line1").style.visibility = "collapse";