Question

我有一张桌子，有20个tr但是当我点击按钮时我想要tr只有4个。

<table class="table">
<tbody>
for (int i = 0; i < 20; i++) {
   <tr class="data">
   <td>ID</td>
   <td>Item</td>
   </tr>
}
</tbody>
</table>

我的按钮：

<button type="button" id="btnFilter" class="btn btn-primary pull-right"><i class="fa fa-search"></i> Filter</button>

我的剧本：

$('#btnFilter').on('click', function() {
        $('.data').empty();
for (int i = 0; i < 4; i++)
        $('.data').append('<td>asd</td>');
    });

再次显示20 ......

Answer 1

$('#btnFilter').on('click', function() {
  $('.table tbody tr:gt(3)').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <td>ID</td>
      <td>Item</td>
    </tr>
    </thead>
  <tbody>
    
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
      <td>8</td>
    </tr>
    <tr>
      <td>9</td>
      <td>9</td>
    </tr>
    <tr>
      <td>10</td>
      <td>10</td>
    </tr>
    <tr>
      <td>11</td>
      <td>11</td>
    </tr>
    <tr>
      <td>12</td>
      <td>12</td>
    </tr>
    <tr>
      <td>13</td>
      <td>13</td>
    </tr>
    <tr>
      <td>14</td>
      <td>14</td>
    </tr>
    <tr>
      <td>15</td>
      <td>15</td>
    </tr>
    <tr>
      <td>16</td>
      <td>16</td>
    </tr>
    <tr>
      <td>17</td>
      <td>17</td>
    </tr>
    <tr>
      <td>18</td>
      <td>18</td>
    </tr>
    <tr>
      <td>19</td>
      <td>19</td>
    </tr>
    <tr>
      <td>20</td>
      <td>20</td>
    </tr>
</table>


<button type="button" id="btnFilter" class="btn btn-primary pull-right"><i class="fa fa-search"></i> Filter</button>

使用:gt() selector

描述：选择匹配集中索引大于索引的所有元素。

注意：索引以0

开头

Answer 2

这样的东西？

$(function() {
  for (i = 0; i < 20; i++) {
    $('.table').append('<tr class="empty"><td>ID</td><td>Item</td></tr>');
  }

  $('#btnFilter').on('click', function() {
    $('.table').empty();
    for (i = 0; i < 4; i++)
      $('.table').append('<tr><td>asd</td></tr>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table">
  <tbody>

  </tbody>
</table>

<button type="button" id="btnFilter" class="btn btn-primary pull-right"><i class="fa fa-search"></i> Filter</button>

删除所有tr并在jquery中添加一组新的tr

2 个答案: