Удалите все tr и добавьте новый набор tr в jquery

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>