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

Question

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

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

您可以使用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';
  }
}