如何在表格中隱藏/顯示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';
  }
}

Answer 2

這是因為您將行顯示為塊。 嘗試使用visibility == "hidden"而不是display

編輯：或者您可以使用display = "table-row" ，如下所示。 use visibility == "hidden"將隱藏該行，但它仍會占用與以前相同的空間。

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 3

設置你的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 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 ，所以設計改變了。

你應該用'table-row'替換'block'

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>