同時將一個表行輸入數據復制到另一表行

Question

我已經開發了兩個表“ TABLE1”和“ TABLE2”。 我想如果我在表1中輸入主題名稱，則它將自動復制到表2中，如果單擊表1的“添加新+”按鈕以添加新行，則此更改將在表2中發生。

 $("#insert66").click(function () { $("#table66").each(function () { var tds = '<tr>'; jQuery.each($('tr:last td', this), function () { tds += '<td>' + $(this).html() + '</td>'; }); tds += '</tr>'; if ($('tbody', this).length > 0) { $('tbody', this).append(tds); } else { $(this).append(tds); } }); }); 

 Table1:- <table id="table66" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert66"></input> <thead> <th>Subject Name</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subName" name="subName"> </td> </tr> </tbody> </table> Table2:- <table id="tablecourse" class="table table-striped table-hover"> <thead> <tr> <th>Subject Name</th> <th>Campus</th> </tr> </thead> <tbody> <tr> <td> <input type="text" class="form-control subName" name="subName"> </td> <td> <select id="multipleSelectExample4" style="width:100%;" data-placeholder="Select an option"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select> </td> </tr> </tbody> </table> 

我已經找到一種邏輯，但是如何使用它卻一無所知

var counterClass = 0
$("#table66 input").change(function(){

 if($(this).hasClass("completed")) {
// update
 $("." + $(this).attr("refClass")).html($(this).val())
 } else {
 // append/insert

 $(this).addClass("completed").attr("refClass", "refClass" + counterClass)
 counterClass += 1

 $().append()

 }
 })

Answer 1

嘗試使用index（） match。在兩個表中都應用Append函數。 $('table').each() 。第一個表輸入值反映與第二個表輸入值具有相同的索引匹配

更新

3表功能。 不要忘記此功能中的新表ID，請參見以下代碼段

 $(document).ready(function(){ $("#insert66").click(function() { $(".table").each(function() { var tds = '<tr>'; jQuery.each($('tr:last td', this), function() { tds += '<td>' + $(this).html() + '</td>'; }); tds += '</tr>'; if ($('tbody', this).length > 0) { $('tbody', this).append(tds); } else { $(this).append(tds); } }); }); $('table').on('input','.subName',function(){ var index =$(this).closest('table').find('input').index(this); $('#tablecourse').find('input[type=text]').eq(index).val($(this).val()) //for second table $('#table3').find('input[type=text]').eq(index).val($(this).val()) //for 3rd table }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Table1:- <table id="table66" class="table table-bordered table-hover"> <input type="button" class="btn green" value="Add New+" id="insert66"></input> <thead> <th>Subject Name</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control subName" name="subName"> </td> </tr> </tbody> </table> Table2:- <table id="tablecourse" class="table table-striped table-hover"> <thead> <tr> <th>Subject Name</th> <th>Campus</th> </tr> </thead> <tbody> <tr> <td> <input type="text" class="form-control subName" name="subName"> </td> <td> <select id="multipleSelectExample4" style="width:100%;" data-placeholder="Select an option"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select> </td> </tr> </tbody> </table> Table3:- <table id="table3" class="table table-striped table-hover"> <thead> <tr> <th>Subject Name</th> <th>Campus</th> </tr> </thead> <tbody> <tr> <td> <input type="text" class="form-control subName" name="subName"> </td> <td> <select id="multipleSelectExample4" style="width:100%;" data-placeholder="Select an option"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select> </td> </tr> </tbody> </table> 

Answer 2

試試這個。 如果您需要任何幫助，請詢問:)

我添加了一個不可見的模板行。 只要您單擊“添加”按鈕，就會將其添加。 具有將文本從一個輸入字段復制到另一個輸入字段的功能。

 function addRow() { $('#table1').append('<tr>'+$('#table1 tr.template').html()+'</tr>'); $('#table2').append('<tr>'+$('#table2 tr.template').html()+'</tr>'); } function updateTabel(source, id){ var text = $(source).val(); var row = $(source).closest('tr').index(); $($('#'+id+' tr')[row]).find('input.subName').val(text); } 

  .template { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" value="Add New" onclick="addRow()" /><br> <br> Table1:- <table id="table1"> <tr> <th>Subject Name</th> </tr> <tr class="template"> <td> <input type="text" class="subName" onKeyUp="updateTabel(this, 'table2')"> </td> </tr> </table> Table2:- <table id="table2"> <tr> <th>Subject Name</th> <th>Campus</th> </tr> <tr class="template"> <td> <input type="text" class="form-control subName" onKeyUp="updateTabel(this, 'table1')"> </td> <td> <select id="multipleSelectExample4" style="width:100%;" data-placeholder="Select an option"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select> </td> </tr> </table>