Таблица HTML: коллапс границы и коллапс видимости

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, как это.Конечно, я мог бы удалить / прочитать элемент стиля, но должен быть другой способ решить эту проблему?!

Answer 1

Конечно, я мог бы удалить / прочитать элемент стиля

Я думаю, это означает, что вы не хотите связываться со свойством border-top при изменении видимости строки, правильно?

В этом случае, похоже, ваш единственный вариант - использовать display:none вместо visibility:collapse [1], что не очень хорошо, потому что тогда ваша таблица может иметь шаткий эффект, который был разработан для visibility:collapseПредотвращение.

[1] https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering не кристально ясно, но похоже, что спецификация предписывает поведение, которое вам не нужно.А хром и 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

.cssText

Вы можете редактировать весь встроенный атрибут [style], используя .cssText:

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 3

У вас есть несколько решений для этого с помощью 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>

Вы также можете использовать Javascript напрямую со свойством getElementById:

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

Или

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

Answer 4

Вы пробовали "показать: нет"?

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

Или, может быть, вы можете попытаться установить верхнюю границу в 0, что должно скрыть ее.

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