如何在 table 中隐藏/显示 tr 标签而不改变单元格的宽度和排序

Question

嗨，我会隐藏/显示来自 table 的一行但是当再次点击显示行时，设计发生了变化隐藏行的列收缩到第一行的一列之下我的代码

function toggle(tr_id) {
  var x = document.getElementById(tr_id);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<div class="col-lg-6 col-lg-push-3">
  <table class="table table-resposive ">
    <tr>
      <td>name</td>
      <td>address</td>
      <td>age</td>
      <td><a onclick="toggle('edit');" class="btn btn-sm btn-primary">edit</a></td>
    </tr>

    <tr id="edit">
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><a class="btn btn-sm btn-success">save</a></td>
    </tr>
  </table>
</div>

Answer 1

这是因为您将行显示为块。尝试使用 visibility == "hidden" 而不是 display

编辑：或者您可以使用 display = "table-row"，如下所示。使用 visibility == "hidden" 将隐藏该行，但它仍将占用与以前相同的 space。

if (x.style.display === "none") {
    x.style.display = "table-row";
} else {
    x.style.display = "none";
}

function toggle(tr_id)
{
  var x = document.getElementById(tr_id);
    if (x.style.visibility === "hidden") {
        x.style.visibility = "visible";
    } else {
        x.style.visibility = "hidden";
    }
}

<div class="col-lg-6 col-lg-push-3">
<table class="table table-resposive ">
<tr> 
<td>name</td>
<td>address</td>
<td>age</td>
<td><a onclick="toggle('edit2');" class="btn btn-sm btn-primary">edit</a></td>

</tr>

 <tr id="edit1">
 <td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
 </tr>

 <tr id="edit2">
 <td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
 </tr>

 <tr id="edit3">
 <td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
 </tr>
</table>

代码段 2：

function toggle(tr_id)
{
  var x = document.getElementById(tr_id);
    if (x.style.display === "none") {
      x.style.display = "table-row";
    } else {
      x.style.display = "none";
    }
}

<div class="col-lg-6 col-lg-push-3">
<table class="table table-resposive ">
<tr> 
<td>name</td>
<td>address</td>
<td>age</td>
<td><a onclick="toggle('edit2');" class="btn btn-sm btn-primary">edit</a></td>

</tr>

 <tr id="edit1">
 <td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
 </tr>

 <tr id="edit2">
 <td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
 </tr>

 <tr id="edit3">
 <td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
 </tr>
</table>

Answer 2

设置你的 td css 为固定宽度

function toggle(tr_id) {
  var x = document.getElementById(tr_id);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

td {
 width: 140px;
 display: inline-block;
}

<div class="col-lg-6 col-lg-push-3">
  <table class="table table-resposive ">
    <tr>
      <td>name</td>
      <td>address</td>
      <td>age</td>
      <td><a onclick="toggle('edit');" class="btn btn-sm btn-primary">edit</a></td>

    </tr>

    <tr id="edit">
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><a class="btn btn-sm btn-success">save</a></td>
    </tr>

  </table>
</div>

Answer 3

您可以使用display="table-row"

function toggle(tr_id) {
  var x = document.getElementById(tr_id);
  if (x.style.display === 'none') {
    x.style.display = 'table-row';
  } else {
    x.style.display = 'none';
  }
}

Answer 4

如何让行移动到顶部

function toggle(tr_id)
{
  var x = document.getElementById(tr_id);
    if (x.style.visibility === "hidden") {
        x.style.visibility = "visible";
    } else {
        x.style.visibility = "hidden";
    }
}

<div class="col-lg-6 col-lg-push-3">
<table class="table table-resposive ">
<tr> 
<td>name</td>
<td>address</td>
<td>age</td>
<td><a onclick="toggle('edit');" class="btn btn-sm btn-primary">edit</a></td>

</tr>

 <tr id="edit">
 <td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
 </tr>
    <tr> 
<td>name</td>
<td>address</td>
<td>age</td>
<td><a onclick="toggle('edit1');" class="btn btn-sm btn-primary">edit</a></td>

</tr>

 <tr id="edit1">
 <td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><input type="text"     ></td>
<td><a class="btn btn-sm btn-success">save</a></td>
 </tr>
</table>

Answer 5

tr的display属性的默认值是table-row，不是block，所以改设计了。

您应该将 'block' 替换为 'table-row'

Answer 6

这是一种简单的 JavaScript 切换方式：

function toggle(_id) {
  var x = document.getElementById(_id);
  x.classList.toggle("hide-me");
}

.hide-me {
  display: none;
}

<div class="col-lg-6 col-lg-push-3">
  <table class="table table-resposive ">
    <tr>
      <td>name</td>
      <td>address</td>
      <td>age</td>
      <td><a onclick="toggle('edit');" class="btn btn-sm btn-primary">edit</a></td>
    </tr>
    <tr id="edit">
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><input type="text"></td>
      <td><a class="btn btn-sm btn-success">save</a></td>
    </tr>
  </table>
</div>

如何在 table 中隐藏/显示 tr 标签而不改变单元格的宽度和排序

How to hide / show tr tag in table without change the width and sort of cells

html

javascript

togglebutton