gpt4 book ai didi

javascript - 单击 'expand' 按钮后如何设置固定表大小

转载 作者:行者123 更新时间:2023-11-28 02:21:05 25 4
gpt4 key购买 nike

我有一个默认情况下隐藏的表格,只有在单击“展开”按钮后才能看到。问题是当我点击按钮时,这个按钮所在的整个 tr 都乱七八糟了。这就是我的意思

$(document).ready(function() {

$('.partTableContent').hide();
$('.expandButton').click(function() {
// .parent() selects the A tag, .next() selects the P tag
$(this).closest('tr').next(' tr').find('div.partTableContent').slideToggle(750);
});
});
<style>.partsTable {
border-collapse: collapse;
}

.sideForPartsTable {
border: 3px solid #05788D;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>

<div class="partTableDiv">
<table class="partsTable" style="width: 100%; height: 30vh">

<tr>

<td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
<td class="sideForPartsTable">Title</td>
<td class="sideForPartsTable" width="5%"><button class="editButton">edit</button></td>
<td class="sideForPartsTable" width="5%"><button class="removeButton">remove</button></td>

</tr>

<tr>
<td colspan="4">
<div class="partTableContent">
<table style="width: 100%">

<tr>
<td> table's tr </td>
</tr>

<tr>
<td> table's tr </td>
</tr>

<tr>
<td> table's tr </td>
</tr>

<tr>
<td> table's tr </td>
</tr>

<tr>
<td> table's tr </td>
</tr>

<tr>
<td> table's tr </td>
</tr>

<tr>
<td> table's tr </td>
</tr>

<tr>
<td> table's tr </td>
</tr>

<tr>
<td> table's tr </td>
</tr>

<tr>
<td> table's tr </td>
</tr>

</table>
</div>

</body>

看到了吗?当我单击展开按钮时,整个 tr's(此按钮所在的位置)高度会缩小。单击“整页”时尤其明显。我怎样才能避免它并使其高度静态?

最佳答案

请给第一个tr的高度说height: 50px;

<table class="partsTable" style="width: 100%;">

<tr style="height: 30vh">

<td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
<td class="sideForPartsTable">Title</td>
<td class="sideForPartsTable" width="5%"><button class="editButton">edit</button></td>
<td class="sideForPartsTable" width="5%"><button class="removeButton">remove</button></td>

</tr>

关于javascript - 单击 'expand' 按钮后如何设置固定表大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48202069/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com