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(行序)这种方式