javascript - 同时将一个表行输入数据复制到另一表行

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()匹配。在两个表中应用Append 函数。 $('table').each() .第一个表输入值反射(reflect)具有相同索引匹配的第二个表输入值

更新

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>