Question

我开发了两个表“TABLE1”和“TABLE2”。我想如果我在表1中输入主题名称，那么它将自动复制到表2中，如果单击Table1的“添加新+”按钮添加新行，则表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()匹配。在两个表中应用附加功能。 $('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

试试这个。如果您需要任何帮助，请询问：）

我添加了一个不可见的模板行。单击时将添加此项附加按钮。以及将文本从一个输入字段复制到另一个输入字段的功能。

＆＃13;

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);
}

＆＃13;

    .template {
        display: none;
    }

＆＃13;

<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>

＆＃13;

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

2 个答案: