新しく追加された行をリセット（元に戻す）中にPREFILLEDテーブル行を保持する方法

Question

ここで、リセットボタンを押すと、新しく追加された行が元に戻されます。しかし、それがクリックされた回数が新しく追加された行を超えると、あらかじめ充填された行も削除されます。あらかじめ塗りつぶした行を削除しないようにするにはどうすればよいですか？

$('#add-row').click(function() { 
 
    var $tbody, $row, additionalRows; 
 
    var numNewRows = parseInt($('#insert-rows-amnt').val(), 10); 
 
\t $('button[type="reset"]').attr('lastCount', parseInt($('#insert-rows-amnt').val(), 10)); 
 
    if (isNaN(numNewRows) || numNewRows <= 0) { 
 
    alert('Please enter number of injection'); 
 
    } else { 
 

 
    $tbody = $('table#one tbody '); 
 
    $row = $tbody.find('tr:last'); 
 
    var lastRowIndex=($row.index()==-1? 0:$row.index()) +1 ; 
 
    additionalRows = new Array(numNewRows); 
 
    for(i=0;i<numNewRows;i++) 
 
    { 
 
    additionalRows[i]=` <tr> 
 
    <td>${lastRowIndex}</td> 
 
     <td> 
 
     <input type="text" ></td> 
 
     <td><input type="text"> </td> 
 
    \t </tr>` 
 
     lastRowIndex=lastRowIndex+1; 
 
    } 
 
    
 
    $tbody.append(additionalRows.join()); 
 
    } 
 
}); 
 

 

 
$('button[type="reset"]').click(function(){ 
 
    var cnt = $('button[type="reset"]').attr('lastCount'); 
 
    for(var i=0; i<cnt; i++){ 
 
    \t $('table tbody tr:nth-last-child(' + (cnt-i) + ')').remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" /> 
 
<button id="add-row" type="button">Add</button> 
 
<button type="reset" name="reset" >Reset</button><br> 
 

 
<table id="one"> 
 
<thead> 
 
<th>thead</th><th>thead</th><th>thead</th> 
 
</thead> 
 
    <tbody> 
 
    <td> 
 
     <input type="text" value="prefilled data"></td> 
 
     <td><input type="text" value="prefilled data"></td> 
 
     <td> <input type="text" value="prefilled data"></td> 
 
</tbody> 
 
</table>

Answer 1

あなたが手動で追加行に余分な属性を追加することができます。

additionalRows[i] =` <tr data-additional='true'> 
... 
... 

、その後行のみを削除

$('table tbody tr[data-additional]:nth-last-child(' + (cnt-i) + ')').remove(); 

作業溶液：

$('#add-row').click(function() { 
 
    var $tbody, $row, additionalRows; 
 
    var numNewRows = parseInt($('#insert-rows-amnt').val(), 10); 
 
\t $('button[type="reset"]').attr('lastCount', parseInt($('#insert-rows-amnt').val(), 10)); 
 
    if (isNaN(numNewRows) || numNewRows <= 0) { 
 
    alert('Please enter number of injection'); 
 
    } else { 
 

 
    $tbody = $('table#one tbody '); 
 
    $row = $tbody.find('tr:last'); 
 
    var lastRowIndex=($row.index()==-1? 0:$row.index()) +1 ; 
 
    additionalRows = new Array(numNewRows); 
 
    for(i=0;i<numNewRows;i++) 
 
    { 
 
    additionalRows[i]=` <tr data-additional='true'> 
 
    <td>${lastRowIndex}</td> 
 
     <td> 
 
     <input type="text" ></td> 
 
     <td><input type="text"> </td> 
 
    \t </tr>` 
 
     lastRowIndex=lastRowIndex+1; 
 
    } 
 
    
 
    $tbody.append(additionalRows.join()); 
 
    } 
 
}); 
 

 

 
$('button[type="reset"]').click(function(){ 
 
    var cnt = $('button[type="reset"]').attr('lastCount'); 
 
    for(var i=0; i<cnt; i++){ 
 
    \t $('table tbody tr[data-additional]:nth-last-child(' + (cnt-i) + ')').remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" /> 
 
<button id="add-row" type="button">Add</button> 
 
<button type="reset" name="reset" >Reset</button><br> 
 

 
<table id="one"> 
 
<thead> 
 
<th>thead</th><th>thead</th><th>thead</th> 
 
</thead> 
 
    <tbody> 
 
    <td> 
 
     <input type="text" value="prefilled data"></td> 
 
     <td><input type="text" value="prefilled data"></td> 
 
     <td> <input type="text" value="prefilled data"></td> 
 
</tbody> 
 
</table>