javascript - 根据各自的高度或内容显示更多和更少

Question

您好，我正在尝试创建一个动态表，它必须只显示 2 个元素(行)，其他行需要隐藏，点击 showmore 时必须显示剩余的行。

谢谢

<table class="table borderless">
  <thead>
    <tr>
      <th></th>
      <th>Thead1</th>
      <th>Thead2</th>
    </tr>
  </thead>
  <tbody class="tbodySpace">
    <tr>
      <td>Row 1 - heading</td>
      <td>
        data1
      </td>
      <td>
        data2
      </td>
    </tr>
    <tr>
      <td>Row 2 - heading</td>
      <td>
        data3
      </td>
      <td>
        data4
      </td>
    </tr>
    <tr>
      <td>Row 3 - heading</td>
      <td>
        data3
      </td>
      <td>
        data4
      </td>
    </tr>
  </tbody>
</table>
<button class="button">Show more</button>

Jsfiddle 是 here

Answer 1

下面是点击按钮时显示 2 行的片段:

$("table tr:gt(2)").hide();

$(".button").on('click', function() {
  var lastIndex = $("table tr:visible:last").index();
  $("table tr").show();
  $("table tr:gt(" + (lastIndex + 3) + ")").hide();
});

.table>tbody>tr>td {
  padding: 15px!important;
}

.table>tbody>tr>td:not(:first-child) {
  border-left: 1px solid #eee !important;
  color: #07A4DD;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table borderless">
  <thead>
    <tr>
      <th></th>
      <th>Thead1</th>
      <th>Thead2</th>
    </tr>
  </thead>
  <tbody class="tbodySpace">
    <tr>
      <td>Row 1 - heading</td>
      <td>
        data1
      </td>
      <td>
        data2
      </td>
    </tr>
    <tr>
      <td>Row 2 - heading</td>
      <td>
        data3
      </td>
      <td>
        data4
      </td>
    </tr>
    <tr>
      <td>Row 3 - heading</td>
      <td>
        data3
      </td>
      <td>
        data4
      </td>
    </tr>
    <tr>
      <td>Row 4 - heading</td>
      <td>
        data3
      </td>
      <td>
        data4
      </td>
    </tr>
    <tr>
      <td>Row 5 - heading</td>
      <td>
        data3
      </td>
      <td>
        data4
      </td>
    </tr>
    <tr>
      <td>Row 6 - heading</td>
      <td>
        data3
      </td>
      <td>
        data4
      </td>
    </tr>
    <tr>
      <td>Row 7 - heading</td>
      <td>
        data3
      </td>
      <td>
        data4
      </td>
    </tr>
    <tr>
      <td>Row 8 - heading</td>
      <td>
        data3
      </td>
      <td>
        data4
      </td>
    </tr>

  </tbody>
</table>
<button class="button">Show more</button>