0
나는 각각에 대해 추가/삭제 버튼을 갖고 싶은 많은 테이블을 가지고있다. 사용자가 추가를 클릭하면 해당 테이블에 행을 추가하고 행을 삭제해야합니다. jquery html 코드를 테이블에 직접 삽입하여이 작업을 수행 할 수 있었지만 많은 테이블이 있으므로 매우 비효율적이되었습니다. 나는 오히려 그 행을 복제하는 함수를 만드는 것을 생각하고 있었지만 이것에 대해 어떻게 해야할지 모르겠습니다. 모든 테이블에 대해 행을 추가/삭제할 때마다이 함수를 호출 할 수 있어야합니다. (두 내 18 개 테이블 용)jquery를 사용하여 복제하기
내 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 코드, 나는 그것을 지금처럼 보이는 것으로부터 단축했다. 어떤 도움이라도 대단히 감사하겠습니다!
stackoverflow의 코드 스 니펫에 대해 알고 계십니까? – ArmaGeddON
은 ids 대신 클래스를 사용합니다 .. Remove 버튼과 같은 클래스를 Add 버튼과 같은 클래스로 사용하고'$ (this) '를 사용하여 –
과 같이 작업해야하는'table tr'을 결정합니다. 회원을이 커뮤니티에 초대하십시오. 그러나 나는 그것을 배울 수 있고 구현할 수있다.이 질문을하는 것이 더 좋은 방법 일까? – Muhammad