如何在重置（撤消）新添加的行时保留PREFILLED表行

Question

现在，当按下重置按钮时，它会撤消新添加的行。但是，当点击的次数超过新添加的行时，它也会删除预填充的行。我该怎么做才能防止预先填充的行被移除？

path.resolve(__dirname,..)

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);
	$('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>
  	  </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++){
  	$('table tbody tr:nth-last-child(' + (cnt-i) + ')').remove();
  }
});

Answer 1

您可以为手动添加的行添加额外属性。

e.g。

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);
	$('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>
  	  </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++){
  	$('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>