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("操作失败,请重新提交")
}
});
}
}
);
})
});
}
}
);
});
$("#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
- jquery 删除动态创建的table中的tr
- jquery动态添加或删除表(table)的行(tr)
- 删除table中的TR
- Jquery 实现动态添加table tr 和删除tr 以及checkbox的全选 和 获取添加TR删除TR后的数据
- jQuery为table表格动态添加或删除tr
- table动态添加、删除tr
- 删除table中的tr标签
- jquery动态给指定的table添加一行tr td
- jQuery实现动态添加tr到table的方法
- js动态给table添加/删除tr
- jquery 动态添加 tr 到 table
- jquery动态往table添加tr
- jquery给table动态添加tr
- 使用jquery动态往table添加tr
- jquery动态创建table
- jquery动态创建table
- jquery 动态删除tr行数据
- jquery动态添加删除(tr/td)
- bzoj4102(基于图的神dp)
- 微信小程序(应用号)开发你一定要知道的一些细节
- Java---Which four statements are true
- 缓冲区溢出
- LeetCode 148. Sort List
- jquery 删除动态创建的table中的tr
- 初识STL——set,multiset,map,multimap
- 写好自己的模板方法,以后要做的就是对于模板方法进行具体化了
- PHP入门
- ehcache2.5后hibernate多SessionFactory报错的解决
- Service
- Linux编程磁盘管理基本命令
- hdu3555 数位dp
- 《python+opencv实践》四、图像特征提取与描述——29理解图像特征