如何在不添加到第一个表的情况下将表行独占地添加到第二个表

Question

当用户输入行no并单击按钮时，我希望 完全 将表格行添加到第二个表格。问题是当单击按钮时，表行被添加到两个表中。我已经尝试将id分配给第二个表，但代码不起作用。有什么想法吗？

＆＃13;

＆＃13;

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = parseInt($('#insert-rows-amnt').val(), 10);

  if (isNaN(numNewRows) || numNewRows <= 0) {
    alert('Please enter number of injection');
  } else {

    $tbody = $('table 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" style="width: 100px" name="vaccineid[]"></td>
      <td><input type="text" style="width:160px"name="vaccinename1[]">   				</td>
  	  </tr>`
      lastRowIndex=lastRowIndex+1;
    }
   
    $tbody.append(additionalRows.join());
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Table 1<table id="zero">
  <tbody>
  
 <td>
      <input type="text" style="width: 100px" name="vaccineid[]"></td>
      <td><input type="text" style="width:160px"name="vaccinename1[]"> 
       </tbody>
</table>
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">Rows no</button>

<table id="one">
  <tbody>
 </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您要向$ tbody添加行，这些行存在于两个表中。因此，在表2中添加行仅在表2的tbody中附加行

$tbody = $('table#one tbody ');

演示 - https://jsfiddle.net/uc3nfdjw/

Answer 2

正如您所说，您已为每个table设置了ID。

我只是按ID

选择第二个表格

$tbody = $('table#one tbody');

这是有效的：

＆＃13;

＆＃13;

$('#add-row').click(function() {
  var $tbody, $row, additionalRows;
  var numNewRows = 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" style="width: 100px" name="vaccineid[]"></td>
      <td><input type="text" style="width:160px"name="vaccinename1[]">   				</td>
  	  </tr>`
      lastRowIndex=lastRowIndex+1;
    }
   
    $tbody.append(additionalRows.join());
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Table 1<table id="zero">
  <tbody>
  
 <td>
      <input type="text" style="width: 100px" name="vaccineid[]"></td>
      <td><input type="text" style="width:160px"name="vaccinename1[]"> 
       </tbody>
</table>
<input type="number" id="insert-rows-amnt" name="insert-rows-amnt" value="<?php echo $tam ?>" />
<button id="add-row" type="button">Rows no</button>

<table id="one">
  <tbody>
 </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;