刪除所有tr並在jquery中添加一組新tr

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>