各自的高度或内容越来越少

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行的代码段：

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个jquery

$('.button').on('click',function(){
  if($(this).text()=='Show more') {
     $('.tbodySpace tr').each(function(){
      $(this).show();
     });
     $(this).text('Show Less');   
  }   
  else {
    $('.tbodySpace tr').each(function(i,e){
     if(i>=2)
      $(this).hide();
    });
    $(this).text('Show more');
  }
});
$('.tbodySpace tr').each(function(i,e){
    if(i>=2)
    $(this).hide();
});

Working fiddle