html代码,select标签部分用到了angular的循环,不用angular的可以正常写option即可。
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>协调部门</th>
<th>协调工作内容</th>
<th>操作</th>
</tr>
</thead>
<tbody id="assistDeptTableId">
<tr class="odd gradeX">
<td>
<label>
<select class="form-control assist-dept-select" name="assistDepartment">
<option *ngFor="let adl of assistDepartmentList"
value="{{adl.departmentId}}">
{{adl.departmentName}}
</option>
</select>
</label>
</td>
<td>
<label>
<input class="form-control assist-dept-content" type="text"
placeholder="请输入协调内容"/>
</label>
</td>
<td>
<button type="button" class="btn btn-success btn-xs btn-add assist-add">
新增
</button>
<button type="button" class="btn btn-danger btn-xs btn-rm assist-rm">
移除
</button>
</td>
</tr>
</tbody>
</table>
下面是typescript代码,把声明变量的let 换成var即可完全用于javascript
/**
* 新增表格行
*/
addTableRow(e: any) {
$('.btn-add').off("click");
$('.btn-rm').off("click");
let button = $(e);
let srcCode = `<tr>`;
let srcId = '';
button.each(function (i: any, item: any) {
srcId = $(item).parent().parent().parent()[0].id;
srcCode += $(item).parent().parent()[0].innerHTML;
});
srcCode += `</tr>`;
$('#' + srcId).append(srcCode);
let rmButton = $('#' + srcId).find("tr:last td:last button:last");
let tr = $('#' + srcId).find("tr");
if (tr.length > 1) {
let buttonClass = "." + rmButton[0].className.replace(/ /g, ".");
$(buttonClass).removeAttr("disabled");
let this_ = this;
$('.btn-add').click(function () {
this_.addTableRow(this);
});
$('.btn-rm').click(function () {
this_.removeTableRow(this);
});
}
}
/**
* 移除表格行
*/
removeTableRow(e: any) {
let button = $(e);
let srcId = '';
button.each(function (i: any, item: any) {
srcId = $(item).parent().parent().parent()[0].id;
});
button.parent().parent().remove();
let rmButton = $('#' + srcId).find("tr:last td:last button:last");
if ($('#' + srcId).find("tr").length <= 1) {
$(rmButton[0]).attr("disabled", "true");
}
}