jqueryを使用してクローンを作成する

Question

私はテーブルの束を持っており、それぞれに追加/削除ボタンがあります。ユーザーが追加をクリックすると、それぞれの表に行が追加され、行も削除されます。私はjquery htmlコードをテーブルに直接置くことでこれを達成できましたが、テーブルが非常に多いので非常に非効率的になりました。私はむしろその行をクローン化する関数を作成することを考えていましたが、これについてどうやって行くのか分かりません。私は任意のテーブルの行を追加/削除するたびにこの関数を呼び出せるようにしたい。

（2つだけ私の18個のテーブルのための）私のhtmlコードは次のとおりです。

<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コード、私はそれが今のように見えるからそれを短縮しました。どんな助けでも大歓迎です！

Answer 1

私は、Removeボタンのボタンと同じ クラスを追加するために...同じクラスを使用すると、テーブルのTRを決定するために$（this）を使用。..

使用クラスの代わりにIDのコメントで述べたように あなたが

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

で作業する必要があります