jquery 删除动态创建的table中的tr

function submitSearch() {


$("#submit").click(function() {
$("#dataTable tbody tr").remove()
$("#hiddenInfoKind").val($("#infoKind").val())


$.getJSON(
"getInfo", {
infoKind: "baseInfo," + $("#infoKind").val()
},
function(data, status) {


if(status == "success") {
$.each(data, function(dataIndex, dataInfo) {


var tr = document.createElement("tr")
tr.id=dataInfo.id
var td_1 = document.createElement("td")
td_1.innerHTML = dataInfo.id
tr.appendChild(td_1)
var td_2 = document.createElement("td")
td_2.innerHTML = dataInfo.code
tr.appendChild(td_2)
var td_3 = document.createElement("td")
td_3.innerHTML = dataInfo.name
tr.appendChild(td_3)
var td_4 = document.createElement("td")
var btn = document.createElement("button")
btn.id = "stop"
btn.style.className = "btn btn-default"
btn.innerHTML = "停用"
td_4.appendChild(btn);
tr.appendChild(td_4)
$("#dataTable tbody").append(tr)
btn.addEventListener("click", function() {

$.getJSON(
"updateBaseInfo", {
infoKind: $("#hiddenInfoKind").val(),
unique: dataInfo.id
},
function(data, status) {

if(status == "success") {
$.each(data, function(stopIndex, stopInfo) {


if(stopInfo.result == "success") {


alert("已停用")
var index=$("#"+dataInfo.id).index()
$("#dataTable tbody tr:eq("+index+")").remove()

} else {
alert("操作失败,请重新提交")
}


});
}


}
);
})






});
}


}
);


});

}


整个方法的功能为 先向后台请求查询数据,根据返回的数据动态创建tbody中的内容

动态删除tbody中的tr主要有三点,首先,要给tr一个唯一id,第二给button绑定一个内部方法,在内部方法中通过var index=$("#"+dataInfo.id).index()获得tr所在的行序

第三步通过$("#dataTable tbody tr:eq("+index+")").remove()来动态删除,网上有说使用$("#table tbody).find("tr").eq(行序).remove()的方式删除,实测只能删除当前的第一行 ,其他号都不能动态删除,应该是jquery的语法要求 使用 tr:eq(行序)这种方式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值