javascript - 如何使用按钮再次附加同一个表以及如何在另一个表中对表的数据进行行

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>