Question

我有一个默认隐藏的表格，只有在点击＆＃34;展开＆＃34;按钮。问题是当我单击按钮时，此按钮所在的整个tr会混乱。这就是我的意思

＆＃13;

$(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);
  });
});

＆＃13;

<style>.partsTable {
  border-collapse: collapse;
}

.sideForPartsTable {
  border: 3px solid #05788D;
}

</style>

＆＃13;

<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>

＆＃13;

请参阅？当我单击展开按钮时，整个tr's（此按钮所在的位置）高度会缩小。点击＆＃34;完整页面＆＃34;时尤其明显。如何避免它并使其高度静止？

Answer 1

plz给出第一个tr高度的高度：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>

点击＆＃39;展开＆＃39;后，如何设置固定表格的大小？按钮

1 个答案: