如何使用按钮再次附加相同的表以及如何在另一个表

时间:2017-03-02 07:16:15

标签: javascript jquery html css html-table

我开发了一个表单,我使用一些表来获取数据,其中与这些表相关的一些关键点是: -

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

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

  3. 但我面临一些问题: -

    1. 无论我在表1中输入的员工名称是什么,都在表2中完美呈现,但它不会出现在表3中,表4(我通过单击AddNew2按钮添加。)

    2. 如果我单击AddNew1按钮在表1中添加新行,则表2中的另一行增加(比如现在表1和表2有2-2行)。但是现在如果我点击AddNew2按钮添加像表2那样的表,那么表只有一个表。

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

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

1 个答案:

答案 0 :(得分:0)

由于您的问题不明确,所以我不确定什么是正确的解决方案,对于您,请尝试以下代码并检查您是否正在寻找此问题。我已经添加了每个方法来在新表中添加员工姓名 -

Fiddle

&#13;
&#13;
$(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>')
});
&#13;
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>
&#13;
&#13;
&#13;