如何使用按钮再次追加同桌以及如何在另一台

Question

我已经开发了一种形式，我使用了一些表来获得，其中涉及到这些表的一些关键点是数据行表的数据： -

1. “AddNew2”按钮用于添加一个表格，如表2所示。如果我点击表1的“AddNew1”按钮，表2中的行数和所有其他使用Addnew2按钮添加的表的行数将增加。

2. 表1是获取相同员工姓名的主表是所有表。这意味着如果我点击“AddNew1”按钮，那么会在表1，表2和其他表中添加新行，并且表1中我正在进行的任何员工名称将在表2和其他表中相同。

但我遇到了一些问题分别是： -

1. 无论员工的名字，我打字在表1中，是完全即将在表2，但它不是在表3，表来4（我通过点击AddNew2按钮添加）

2. 如果我单击AddNew1按钮在表1中添加新行，那么表2中又增加了一行（比如现在表1和表2有2-2行）。但是现在如果我点击AddNew2按钮来添加表2所示的表格，那么表格只会与一个表格一起提供。

我无法解决此问题。我在这里添加了我的代码，请看看。

$(document).ready(function() { 
 
    $("#insert66").click(function() { 
 
    $(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </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 
 
    }); 
 
}); 
 

 

 
$("#insert17").click(function() { 
 
    $(".individualSalSection").append(' <div class="portlet-body individual individualMarksSectionSub"><label class="label1 col-md-12 individual labelBoardName" style="display:none"> Enter Board Name </label><input type="text" class="form-control individual boardName"></input> <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="subject1"> </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>') 
 
});

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

 
Table 1:- 
 

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

 

 
    </thead> 
 
    <tbody> 
 
    <tr> 
 

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

 

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

 

 

 
<div class="portlet light portlet-fit box individual individualSalSection"> 
 
    <input type="button" class="btn green individual" value="Add New+" id="insert17"></input> 
 
    <div class="portlet-body individual individualSalSectionSub"> 
 
    <label class="label1 col-md-12 individual labelBoardName" style="display:none"> Enter Board Name </label> 
 
    <input type="text" class="form-control individual boardName"></input> 
 
    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

至于你的问题是不明确的，所以我不知道什么应该是正确的解决方案，为您，请尝试以下代码，并检查您是否正在寻找此。我已经添加了各种手段在新表中添加员工姓名，以及 -

Fiddle

$(document).ready(function() { 
 
    $("#insert66").click(function() { 
 
    $(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </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); 
 
    var that = $(this); 
 
    
 
    //for second table 
 
    $('.tableboth').each(function(index,obj){ 
 
    
 
    $(obj).find('.EmpName').val(that.val())}) 
 
    //for 3rd table 
 
    }); 
 
}); 
 

 

 
$("#insert17").click(function() { 
 
    $(".individualSalSection").append(' <div class="portlet-body individual individualMarksSectionSub"><label class="label1 col-md-12 individual labelBoardName" style="display:none"> Enter Board Name </label> <table class="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual"> <thead> <th>Subject</th> <th> Marks</th> <th> is mandatory</th> </thead> <tbody> <tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="subject1"> </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>') 
 
});

Table 1:- 
 

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

 

 
    </thead> 
 
    <tbody> 
 
    <tr> 
 

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

 

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

 

 

 
<div class="portlet light portlet-fit box individual individualSalSection"> 
 
    <input type="button" class="btn green individual" value="Add New+" id="insert17"></input> 
 
    <div class="portlet-body individual individualSalSectionSub"> 
 
    <label class="label1 col-md-12 individual labelBoardName" style="display:none"> Enter Board Name </label> 
 
    <input type="text" class="form-control individual boardName"></input> 
 
    Table2: 
 
    <table class="tableboth arrSubjects table table-striped table-hover arrSubjects individual"> 
 

 
     <thead> 
 
     <th>Subject</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>