[英]How to hide / show tr tag in table without change the width and sort of cells
嗨,我会隐藏/显示表格中的一行但是当单击再次显示行时,设计更改隐藏行的列缩小到第一行的一列我的代码
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>
您可以使用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';
}
}
这是因为您将行显示为块。 尝试使用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>
设置你的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>
如何使行移动到顶部
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>
tr
的display
属性的默认值是table-row
而不是block
,所以设计改变了。
你应该用'table-row'替换'block'
这是一种简单的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.