どのように第一のテーブルに

Question

を追加することなく、排他的に第二のテーブルにテーブルの行を追加するために私がしたい独占は、ときに、ユーザー入力なし2番目のテーブルに行をテーブルの行を追加していないし、ボタンをクリックしてください。問題は、ボタンがクリックされ、テーブルの行が両方のテーブルに追加されるときです。私は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

あなたが言ったように、あなたは各tableにIDを設定しました。

私はちょうどID

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

そして、それが動作していることにより、第2のテーブルを選択しています：

$('#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にテーブル2アペンド行の行を追加するだけ

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

デモ - https://jsfiddle.net/uc3nfdjw/