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

来源:互联网 发布:redis数据库设计java 编辑:程序博客网 时间:2024/05/22 12:37
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(行序)这种方式

0 0
原创粉丝点击