如何添加錶行到第2臺專而不增加1臺

Question

我想專門添加錶行到第2表，當用戶輸入的行沒有，然後單擊按鈕。問題在於當按鈕被點擊時，表格行被添加到兩個表格中。我試圖給第二個表分配一個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[]"> \t \t \t \t </td> 
 
    \t </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>

Answer 1

正如你所說，你已經設置的ID給每個table。

我只是通過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[]"> \t \t \t \t </td> 
 
    \t </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>

Answer 2

你加入行$ TBODY這是目前在兩個表中。所以要加排表中的兩行追加表2中的tbody只有

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

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