如何将选中的复选框从一个表复制到另一个表

Question

我有两个表，其中表1是表2的主表。如果我单击addnew按钮而不是在表1和表2中添加新行，并且无论我将写什么员工名称，它将被复制到表2中时间。我想复制已检查的输入复选框也从表1到表2.我已经添加了我的代码，请帮忙。

＆＃13;

＆＃13;

export LD_LIBRARY_PATH="/usr/local/lib"

＆＃13;

 $(document).ready(function() {
  $("#insert66").click(function() {
    $(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></td> <td> <input type="checkbox" id="mandatorySub"> </td></tr>')
    $("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr>')
  });
  $('.copySubName').on('input', '.EmpName', function() {
    var index = $(this).closest('table').find('input').index(this);
    //for second table
    $('#tableboth').find('.EmpName').eq(index).val($(this).val())
    //for 3rd table
  });
});

＆＃13;

＆＃13;

＆＃13;

Answer 1

你应该使用mandatorySub作为一个类，而不是在任何地方使用多个id。 id的使用在文档中应该是唯一的。

您应该瞄准的是在change复选框的状态下触发事件，并相应地选中/取消选中其他复选框。

参考代码：

$(document).ready(function() {
  $("#insert66").click(function() {
    $(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></td> <td> <input type="checkbox" class="mandatorySub"> </td></tr>')
    $("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" class="mandatorySub"> </td> </tr>')
  });
  $('.copySubName').on('input', '.EmpName', function() {
    var index = $(this).closest('table').find('input').index(this);
    //for second table
    $('#tableboth').find('.EmpName').eq(index).val($(this).val())
    //for 3rd table
  });

  $(document).on("change", ".mandatorySub", function() {
    var checkboxIndex = $(this).closest('table').find('input[type="checkbox"]').index(this)
    if ($(this).is(":checked")) {
      $('#tableboth').find('input[type="checkbox"]').eq(checkboxIndex).prop("checked", true);
    } else {
      $('#tableboth').find('input[type="checkbox"]').eq(checkboxIndex).prop("checked", false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="table66" class="table table-bordered table-hover copySubName">
  <input type="button" class="btn green" value="Add New+" id="insert66" />
  <thead>

    <th>Employee Name</th>
    <th> is mandatory</th>

  </thead>
  <tbody>
    <tr>

      <td>
        <input type="text" class="form-control EmpName" name="EmpName">
      </td>
      <td>
        <input type="checkbox" class="mandatorySub">
      </td>

    </tr>
  </tbody>
</table>



<div class="portlet light portlet-fit box individual individualSalSection">
  <div class="portlet-body individual individualSalSectionSub">
    Table2:
    <table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual">

      <thead>
        <th>Employee</th>
        <th> Marks</th>
        <th> is mandatory</th>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="text" class="form-control EmpName" disabled="true" name="EmpName">
          </td>
          <td>
            <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
          </td>
          <td>
            <input type="checkbox" class="mandatorySub">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

您需要将id =“mandatorySub”更改为class =“mandatorySub1”和class =“mandatorySub2”

我已经更新了您的代码，如果我理解正确，这将对您有所帮助

$(document).ready(function() {
  $("#insert66").click(function() {
    $(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td><td><input type="checkbox" class="mandatorySub1"></td></tr>')
    $("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" class="mandatorySub2"> </td> </tr>')
  });
  $('.copySubName').on('input', '.EmpName', function() {
    var index = $(this).closest('table').find('input').index(this);
    //for second table
    $('#tableboth').find('.EmpName').eq(index).val($(this).val())
    //for 3rd table
  });
  $('body').on('click','.mandatorySub1',function(){
     $('input.mandatorySub2').eq($("input.mandatorySub1").index( this )).trigger('click');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table id="table66" class="table table-bordered table-hover copySubName">
  <input type="button" class="btn green" value="Add New+" id="insert66"></input>
  <thead>

    <th>Employee Name</th>
    <th> is mandatory</th>

  </thead>
  <tbody>
    <tr>

      <td>
        <input type="text" class="form-control EmpName" name="EmpName">
      </td>
      <td>
        <input type="checkbox" class="mandatorySub1">
      </td>

    </tr>
  </tbody>
</table>



<div class="portlet light portlet-fit box individual individualSalSection">
  <div class="portlet-body individual individualSalSectionSub">
    Table2:
    <table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual">

      <thead>
        <th>Employee</th>
        <th> Marks</th>
        <th> is mandatory</th>
      </thead>
      <tbody>
        <tr>
          <td>
            <input type="text" class="form-control EmpName" disabled="true" name="EmpName">
          </td>
          <td>
            <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
          </td>
          <td>
            <input type="checkbox" class="mandatorySub2">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>