Wie kopiere Checkbox von einer Tabelle in eine andere Tabelle

Question

Ich habe zwei Tabelle, wo Tabelle 1 Master Tabelle für Tabelle 2 ist. Wenn ich Addnew Button als eine neue Zeile wird in Tabelle 1 und Tabelle 2 und was auch immer Mitarbeiter Name hinzugefügt Ich schreibe es wird in Tabelle 2 gleichzeitig kopiert werden. Ich möchte checked input checkbox auch von Tabelle 1 nach table2 kopieren. Ich habe meinen Code hinzugefügt, bitte helfen.

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

<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" id="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" id="mandatorySub"> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    </div>

Answer 1

Sie sollen mandatorySub als eine Klasse verwenden, anstatt mehr überall IDs. Die Verwendung von IDs soll innerhalb eines Dokuments eindeutig sein.

Was Sie anstreben sollten, ist ein Ereignis auf 10 des Status Ihrer Checkboxen zu feuern und die anderen Checkboxen entsprechend zu aktivieren/deaktivieren.

Siehe Code:

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

Sie benötigen id = "mandatorySub" zu class = "mandatorySub1" und = "mandatorySub2" Klasse ändern

ich Ihren Code aktualisiert hatte kann dir helfen, wenn ich dich richtig verstehe

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