首先来看需求场景:
1,从下拉框中选中门店后,实时将门店的序号、名称添加至左边表格中;
2,点击表格中末列中的删除,移除改行数据;
3,此操作在弹窗中,这个框架的弹窗每次关闭需要手动清理数据,所以需要将表格中除了标题行之外的行移除;
实现:
1,下拉框旁边的‘添加’按钮增加触发事件addShare()方法
var i = 0;
function addShare() {
var StoreId = $("#tempManageStoreList").val();
var StoreName = $("#tempManageStoreList option:selected").text().trim();
if (StoreId != 0) {
i++;
var rowTem = '<tr class="tr_' + i + '">' + '<td data="storeId">' + StoreId + '</td>'
+ '<td>' + StoreName + '</td>'
+ '<td><a href="#" onclick=delAddRow(' + i + ') >删除</a></td>'
+ '</tr>';
$("#addShareTable tbody:last").append(rowTem);
} else {
alert('请添加可用门店!')
}
}
2,定义删除行方法delAddRow()
function delAddRow(id) {
$("#addShareTable .tr_" + id).remove();
}
3,移除首行以外的所有行
$("#tableName").find("tr:not(:first)").remove();