使用jquery进行克隆

时间：2017-05-02 17:39:22

标签： javascript jquery html ajax

我有一堆表，我希望每个表都有一个添加/删除按钮。当用户单击添加时，它应该向相应的表添加一行并删除该行。我能够通过让jquery直接将html代码放入表中来实现这一点，但由于我有这么多表，因此效率非常低。我正在考虑创建一个函数，克隆该行，但我不知道该怎么做。我希望每当我为任何表添加/删除行时都能调用此函数。

我的html代码（我的18个表中只有两个）是：

<div class="well">
<h4>1.1 Teaching</h4>
<small>Please add the courses taught during the calendar year.</small>
<form class="form-horizontal">
  <div class="table-responsive" id="table1_1">
  <table width="100%" class="table table-striped table-bordered table-hover" id="teaching">
    <thead>
      <tr>
        <th>Name</th>
        <th>Section</th>
        <th>Session</th>
        <th>Req'd or Elective</th>
        <th>Presentation Format<sup>*</sup></th>
        <th>%'age Taught</th>

      </tr>
    </thead>
    <tbody>
      <tr class="ia_table">
        <td><select class="form-control" name="courseTB1_0" id="course">
                                                               <option>Course</option>
                                                                <option>John</option>
                                                                <option>Mike</option>
                                                                <option>Mary</option>
                                                                <option>William</option>
                                                            </select></td>
        <td><input type="text" name="sectionTB1_0" id="section" placeholder='Section' class="form-control" /></td>
        <td><select class="form-control" name="sessionTB1_0" id="session">
                                                               <option>Session</option>
                                                                <option>Fall</option>
                                                                <option>Winter</option>
                                                                <option>Spring</option>
                                                                <option>Summer</option>
                                                            </select></td>
        <td><select class="form-control" name="reqElecTB1_0" id="reqElec">
                                                               <option>Select</option>
                                                                <option>Required</option>
                                                                <option>Elective</option>
                                                            </select></td>
        <td><input type="text" name="presentationTB1_0" id="presentation" placeholder="Format" class="form-control" /></td>
        <td><input type="number" name="percentageTB1_0" id="percentage" placeholder="%" class="form-control" /></td>

      </tr>
    </tbody>
  </table>
  <div class="row">
    <div class="col-sm-2">
      <a id="add_row_ia" class="btn btn-primary pull-left">Add Row</a>
    </div>
    <div class="col-sm-2 col-sm-offset-8">
      <a id='delete_row_ia' class="pull-right btn btn-danger">Delete Row</a>
    </div>
  </div>
</div>


<div class="well">
<h4>1.2 Supervision of Undergraduate Students, Graduate Students, Postdoctoral Fellows</h4>
<small>Include those who have completed their studies/research this year.
</small>
<form class="form-horizontal">
  <div class="table-responsive" id="table1_2">
  <table width="100%" class="table table-striped table-bordered table-hover" id="supervision">
    <thead>
      <tr>
        <th>Name</th>
        <th>Type of Student</th>
        <th>Start Date</th>
        <th>Co-Supervisor(s) (if any)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="s_table">
        <td><input type="text" name="nameTB2_0" id="name" placeholder='Name' class="form-control" /></td>
        <td><select class="form-control" name="studentTB2_0" id="student">
                                                               <option>Type</option>
                                                                <option>Bachelors</option>
                                                                <option>Masters</option>
                                                                <option>Doctoral</option>
                                                                <option>Postdoctoral</option>
                                                            </select></td>
        <td><input class="form-control" type="date" name="startTB2_0" id="start"></td>
        <td><input type="text" name="cosupervisorTB2_0" id="cosupervisor" placeholder="Co-Supervisor" class="form-control" /></td>
      </tr>
    </tbody>
  </table>
  <!-- /.table-responsive -->
  <div class="row">
    <div class="col-sm-2">
      <a id="add_row_supervision" class="btn btn-primary pull-left">Add Row</a>
    </div>
    <div class="col-sm-2 col-sm-offset-8">
      <a id='delete_row_supervision' class="pull-right btn btn-danger">Delete Row</a>
    </div>
  </div>
</div>
</form>

</div>

我的Jquery代码如下：

$("body").on('click', '#add_row_ia', function() {
  var tr = $('#teaching .ia_table:last');
  var clone = tr.clone();
  clone.find("input").val('');
  clone.find("select").val('');
  tr.after(clone);
});

$("body").on('click', '#delete_row_ia', function() {
  var rowCount = $('#teaching tr').length;
  if (rowCount > 2) {
    $('#teaching tr:last').remove();
  };
});

$("body").on('click', '#add_row_supervision', function() {
  var tr = $('#supervision .s_table:last');
  var clone = tr.clone();
  clone.find("input").val('');
  clone.find("select").val('');
  tr.after(clone);
});

$("body").on('click', '#delete_row_supervision', function() {
  var rowCount = $('#supervision tr').length;
  if (rowCount > 2) {
    $('#supervision tr:last').remove();
  };
});

对于令人难以置信的长html和jquery代码道歉，我确实从现在看起来缩短了它。任何帮助将不胜感激！

1 个答案:

答案 0 :(得分：2)

正如我在评论中所说

  

使用类而不是ids ..使用相同的类添加按钮和相同   删除按钮的类..并使用$（this）来确定表tr   你需要使用

$(document).on('click', '.add_row', function() {
  var tr = $(this).closest('.row').prev('table').find('tr:last');
  var clone = tr.clone();
  clone.find("input").val('');
  clone.find("select").val('');
  tr.after(clone);
});

$(document).on('click', '.delete_row', function() {
  var rowCount = $(this).closest('.row').prev('table').find('tr').length;
  var tr = $(this).closest('.row').prev('table').find('tr:last');
  if (rowCount > 2) {
    tr.remove();
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well">
<h4>1.1 Teaching</h4>
<small>Please add the courses taught during the calendar year.</small>
<form class="form-horizontal">
  <div class="table-responsive" id="table1_1">
  <table width="100%" class="table table-striped table-bordered table-hover" id="teaching">
    <thead>
      <tr>
        <th>Name</th>
        <th>Section</th>
        <th>Session</th>
        <th>Req'd or Elective</th>
        <th>Presentation Format<sup>*</sup></th>
        <th>%'age Taught</th>

      </tr>
    </thead>
    <tbody>
      <tr class="ia_table">
        <td><select class="form-control" name="courseTB1_0" id="course">
                                                               <option>Course</option>
                                                                <option>John</option>
                                                                <option>Mike</option>
                                                                <option>Mary</option>
                                                                <option>William</option>
                                                            </select></td>
        <td><input type="text" name="sectionTB1_0" id="section" placeholder='Section' class="form-control" /></td>
        <td><select class="form-control" name="sessionTB1_0" id="session">
                                                               <option>Session</option>
                                                                <option>Fall</option>
                                                                <option>Winter</option>
                                                                <option>Spring</option>
                                                                <option>Summer</option>
                                                            </select></td>
        <td><select class="form-control" name="reqElecTB1_0" id="reqElec">
                                                               <option>Select</option>
                                                                <option>Required</option>
                                                                <option>Elective</option>
                                                            </select></td>
        <td><input type="text" name="presentationTB1_0" id="presentation" placeholder="Format" class="form-control" /></td>
        <td><input type="number" name="percentageTB1_0" id="percentage" placeholder="%" class="form-control" /></td>

      </tr>
    </tbody>
  </table>
  <div class="row">
    <div class="col-sm-2">
      <a id="add_row_ia" class="btn btn-primary pull-left add_row">Add Row</a>
    </div>
    <div class="col-sm-2 col-sm-offset-8">
      <a id='delete_row_ia' class="pull-right btn btn-danger delete_row">Delete Row</a>
    </div>
  </div>
</div>
<div class="well">
<h4>1.2 Supervision of Undergraduate Students, Graduate Students, Postdoctoral Fellows</h4>
<small>Include those who have completed their studies/research this year.
</small>
<form class="form-horizontal">
  <div class="table-responsive" id="table1_2">
  <table width="100%" class="table table-striped table-bordered table-hover" id="supervision">
    <thead>
      <tr>
        <th>Name</th>
        <th>Type of Student</th>
        <th>Start Date</th>
        <th>Co-Supervisor(s) (if any)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="s_table">
        <td><input type="text" name="nameTB2_0" id="name" placeholder='Name' class="form-control" /></td>
        <td><select class="form-control" name="studentTB2_0" id="student">
                                                               <option>Type</option>
                                                                <option>Bachelors</option>
                                                                <option>Masters</option>
                                                                <option>Doctoral</option>
                                                                <option>Postdoctoral</option>
                                                            </select></td>
        <td><input class="form-control" type="date" name="startTB2_0" id="start"></td>
        <td><input type="text" name="cosupervisorTB2_0" id="cosupervisor" placeholder="Co-Supervisor" class="form-control" /></td>
      </tr>
    </tbody>
  </table>
  <!-- /.table-responsive -->
  <div class="row">
    <div class="col-sm-2">
      <a id="add_row_supervision" class="btn btn-primary pull-left add_row">Add Row</a>
    </div>
    <div class="col-sm-2 col-sm-offset-8">
      <a id='delete_row_supervision' class="pull-right btn btn-danger delete_row">Delete Row</a>
    </div>
  </div>
</div>
</form>

</div>

相关问题
最新问题