jqueryだけで他のテーブルに行を渡す方法はありますか？

Question

私はJavaScriptを学んでいます、と私はテーブルから、このような他のテーブルに行を渡したい：

テーブルからパス行は、他のテーブルに同じ行を繰り返してなくて... どのように私はいますか？

私はこれを持っている：あなただけの二の表のinputイベントのイベントハンドラが欠落しているよう

$(".btn_add").on("click", function() { 
 
    var column1 = $(this).closest('tr').children()[0].textContent; 
 
    var column2 = $(this).closest('tr').children()[1].textContent; 
 
    var column4 = $(this).closest('tr').children()[3].textContent; 
 
    var column5 = $(this).closest('tr').children()[4].textContent; 
 
    $("#second_table").append("<tr><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>"); 
 

 
    $(".btn_remove").click(function() { 
 
    $(this).parent().parent().remove(); 
 
    }); 
 

 
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<table id="first_table" class="table table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th># Code</th> 
 
     <th>Product</th> 
 
     <th>Category</th> 
 
     <th>Stock</th> 
 
     <th>Price</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Monitor A</td> 
 
     <td>X</td> 
 
     <td>5</td> 
 
     <td>7.5</td> 
 
     <td> 
 
     <button class="btn btn-info btn_add">+ Add</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Mouse B</td> 
 
     <td>X</td> 
 
     <td>5</td> 
 
     <td>12.4</td> 
 
     <td> 
 
     <button class="btn btn-info btn_add">+ Add</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Keyboard D</td> 
 
     <td>X</td> 
 
     <td>8</td> 
 
     <td>22.35</td> 
 
     <td> 
 
     <button class="btn btn-info btn_add">+ Add</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td>Motherboard C</td> 
 
     <td>Y</td> 
 
     <td>14</td> 
 
     <td>50</td> 
 
     <td> 
 
     <button class="btn btn-info btn_add">+ Add</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<br> 
 

 
<table id="second_table" class="table table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th># Code</th> 
 
     <th>Product</th> 
 
     <th>Stock</th> 
 
     <th>Price</th> 
 
     <th>Input</th> 
 
     <th>Calculated Field</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    </tbody> 
 
</table>

Answer 1

あなたは基本的に自社の製品IDで行を識別するために、擬似クラスを作成する必要があります。私の例では、名前をつけました。 "copy_1"その後、2番目のテーブルにIDがすでに存在するかどうかを確認することができます。私はまた、1つの製品を追加するために入力フィールドが増加すると付け加えました。これを望まない場合は、else文を削除してください。

サイドノート： "on"メソッドを使用すると、グローバルリスナーを宣言することができます。このリスナは、動的生成エレメントにも適用されます。また、削除ボタンにも使用でき、誰かが製品を追加するたびにいつでも再宣言する必要はありません。私はこれも私のコードで変更します。ニースの答えJquery adding event listeners to dynamically added elements

$(".btn_add").on("click", function() { 
 
    var column1 = $(this).closest('tr').children()[0].textContent; 
 
    var column2 = $(this).closest('tr').children()[1].textContent; 
 
    var column4 = $(this).closest('tr').children()[3].textContent; 
 
    var column5 = $(this).closest('tr').children()[4].textContent; 
 
    // check if the row already exists in the 2nd table 
 
    // if no, add the line to the 2nd table 
 
    // if yes, add one product to the input field 
 
    if($("#second_table .copy_"+column1).length == 0) 
 
    { 
 

 
    $("#second_table").append("<tr class='copy_"+column1+"'><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number' value='1'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>"); 
 
    } 
 
    else 
 
    { 
 
    var value = parseInt($("#second_table .copy_"+column1+" input").val()) + 1; 
 
    $("#second_table .copy_"+column1+" input").val(value); 
 
    } 
 
}); 
 

 
$("body").on("click",".btn_remove", function() { 
 
    $(this).parent().parent().remove(); 
 
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<table id="first_table" class="table table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th># Code</th> 
 
     <th>Product</th> 
 
     <th>Category</th> 
 
     <th>Stock</th> 
 
     <th>Price</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Monitor A</td> 
 
     <td>X</td> 
 
     <td>5</td> 
 
     <td>7.5</td> 
 
     <td> 
 
     <button class="btn btn-info btn_add">+ Add</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Mouse B</td> 
 
     <td>X</td> 
 
     <td>5</td> 
 
     <td>12.4</td> 
 
     <td> 
 
     <button class="btn btn-info btn_add">+ Add</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Keyboard D</td> 
 
     <td>X</td> 
 
     <td>8</td> 
 
     <td>22.35</td> 
 
     <td> 
 
     <button class="btn btn-info btn_add">+ Add</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td>Motherboard C</td> 
 
     <td>Y</td> 
 
     <td>14</td> 
 
     <td>50</td> 
 
     <td> 
 
     <button class="btn btn-info btn_add">+ Add</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<br> 
 

 
<table id="second_table" class="table table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th># Code</th> 
 
     <th>Product</th> 
 
     <th>Stock</th> 
 
     <th>Price</th> 
 
     <th>Input</th> 
 
     <th>Calculated Field</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    </tbody> 
 
</table>

Answer 2

に見えます。コンテンツは動的に追加されるため、event delegationを使用します。

次のコードは、トリックを行う必要があります。

$("#second_table").on("input", "input", function() { 
    var input = $(this); 
    var columns = input.closest("tr").children(); 
    var price = columns.eq(3).text(); 
    var calculated = input.val() * price; 
    columns.eq(5).text(calculated); 
}); 

は、以下の実行中のスニペットあります。 2番目のテーブルの入力を変更すると、リアルタイムで価格計算が表示されます。

$(".btn_add").on("click", function() { 
 
    var column1 = $(this).closest('tr').children()[0].textContent; 
 
    var column2 = $(this).closest('tr').children()[1].textContent; 
 
    var column4 = $(this).closest('tr').children()[3].textContent; 
 
    var column5 = $(this).closest('tr').children()[4].textContent; 
 
    $("#second_table").append("<tr><td>" + column1 + "</td><td>" + column2 + "</td><td>" + column4 + "</td><td>" + column5 + "</td><td><input type='number'></td><td>--</td><td><button class='btn btn-danger btn_remove'>- Remove</button></td></tr>"); 
 

 
    $(".btn_remove").click(function() { 
 
    $(this).parent().parent().remove(); 
 
    }); 
 

 
}); 
 

 
$("#second_table").on("input", "input", function() { 
 
    var input = $(this); 
 
    var columns = input.closest("tr").children(); 
 
    var price = columns.eq(3).text(); 
 
    var calculated = input.val() * price; 
 
    columns.eq(5).text(calculated); 
 
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<table id="first_table" class="table table-bordered"> 
 
    <thead> 
 
    <tr> 
 
     <th># Code</th> 
 
     <th>Product</th> 
 
     <th>Category</th> 
 
     <th>Stock</th> 
 
     <th>Price</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>Monitor A</td> 
 
     <td>X</td> 
 
     <td>5</td> 
 
     <td>7.5</td> 
 
     <td> 
 
     <button class="btn btn-info btn_add">+ Add</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>2</td> 
 
     <td>Mouse B</td> 
 
     <td>X</td> 
 
     <td>5</td> 
 
     <td>12.4</td> 
 
     <td> 
 
     <button class="btn btn-info btn_add">+ Add</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>3</td> 
 
     <td>Keyboard D</td> 
 
     <td>X</td> 
 
     <td>8</td> 
 
     <td>22.35</td> 
 
     <td> 
 
     <button class="btn btn-info btn_add">+ Add</button> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>4</td> 
 
     <td>Motherboard C</td> 
 
     <td>Y</td> 
 
     <td>14</td> 
 
     <td>50</td> 
 
     <td> 
 
     <button class="btn btn-info btn_add">+ Add</button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<br> 
 

 
<table id="second_table" class="table table-bordered table-hover"> 
 
    <thead> 
 
    <tr> 
 
     <th># Code</th> 
 
     <th>Product</th> 
 
     <th>Stock</th> 
 
     <th>Price</th> 
 
     <th>Input</th> 
 
     <th>Calculated Field</th> 
 
     <th>Action</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 

 
    </tbody> 
 
</table>