Javascript 使用jquery进行克隆

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

我的html代码（仅适用于18个表中的两个）是：

抱歉，html和jquery代码太长了，我确实缩短了它现在的样子。任何帮助都将不胜感激

正如我在评论中所说

---

使用类而不是ID。。使用相同的类添加按钮和相同的 用于删除按钮的类。。并使用$（this）确定表tr 你需要和我一起工作

$（文档）。在（'单击'，'上。添加行'，函数（）{
var tr=$（this）.closest（'.row'）.prev（'table'）.find（'tr:last'）；
var clone=tr.clone（）；
clone.find（“输入”）.val（“”）；
clone.find（“select”）.val（“”）；
tr.after（克隆）；
});
$（文档）。在（'单击'，'上。删除行'，函数（）{
var rowCount=$（this）.closest（'.row'）.prev（'table'）.find（'tr'）.length；
var tr=$（this）.closest（'.row'）.prev（'table'）.find（'tr:last'）；
如果（行计数>2）{
tr.remove（）；
};
});

1.1教学
请添加日历年中教授的课程。
名称
部分
一场
需要或选修
演示文稿格式*
%”他说
课程
约翰
迈克
玛丽
威廉
一场
落下
冬天
春天
夏天
挑选
要求的
选修的
添加行
删除行
1.2本科生、研究生、博士后研究员的监督
包括今年完成学业/研究的人员。
名称
学生类型
开始日期
共同监督人（如有）
类型
单身汉
大师
博士
博士后
添加行
删除行
正如我在评论中所说

使用类而不是ID。。使用相同的类添加按钮和相同的
用于删除按钮的类。。并使用$（this）确定表tr
你需要和我一起工作


$（文档）。在（'单击'，'上。添加行'，函数（）{
var tr=$（this）.closest（'.row'）.prev（'table'）.find（'tr:last'）；
var clone=tr.clone（）；
clone.find（“输入”）.val（“”）；
clone.find（“select”）.val（“”）；
tr.after（克隆）；
});
$（文档）。在（'单击'，'上。删除行'，函数（）{
var rowCount=$（this）.closest（'.row'）.prev（'table'）.find（'tr'）.length；
var tr=$（this）.closest（'.row'）.prev（'table'）.find（'tr:last'）；
如果（行计数>2）{
tr.remove（）；
};
});

1.1教学
请添加日历年中教授的课程。
名称
部分
一场
需要或选修
演示文稿格式*
%”他说
课程
约翰
迈克
玛丽
威廉
一场
落下
冬天
春天
夏天
挑选
要求的
选修的
添加行
删除行
1.2本科生、研究生、博士后研究员的监督
包括那些有compl的人
<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>

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