如何在不添加到第一个表的情况下专门将表行添加到第二个表答案

【问题标题】：How to ADD Table Row to the 2nd table exclusively without adding to the 1st table如何在不添加到第一个表的情况下专门将表行添加到第二个表
【发布时间】：2017-07-12 16:48:09
【问题描述】：

当用户输入行号并单击按钮时，我想仅将表格行添加到第二个表格。问题是当单击按钮时，表行被添加到两个表中。我试图为第二个表分配一个 id，但代码不起作用。有什么想法吗？

$('#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());
  }
});

<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>

【问题讨论】：

标签： javascript jquery html html-table

【解决方案1】：

您正在向两个表中都存在的 $tbody 添加行。因此，要在表 2 中添加行，仅在表 2 的 tbody 中添加行

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

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

【讨论】：

【解决方案2】：

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

我只是通过 id 选择第二个表

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

这是有效的：

$('#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());
  }
});

<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>

【讨论】：

如果您认为我的答案解决了您的问题，您可以用绿色勾号标记我的答案。干杯！