table动态添加删除一行
程序员文章站
2022-07-13 12:28:00
...
<table border="2px" class="tab">
<thead>
<tr>
<th>博客标题</th>
<th>博客描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
添加
//页面加载
$(".btn1").click(function () {
//清空页面
$(".tab>tbody").html("");
$.ajax({
url: "/showBlog",
type: "get",
data: {
page: $(".btn1").val()
},
success: function (re) {
var a = re.data;
console.log(a);
//遍历请求返回数据
for (var aKey in a) {
//动态添加tr,并写入元素
var title = $("<td></td>").html(a[aKey].title);
var des = $("<td></td>").html(a[aKey].des);
var content= $("<td class='deleteBlog'></td>").html("删除");
$("<tr></tr>").append(title).append(des).append(content).appendTo(".tab>tbody")
}
}
});
});
删除
//删除博客
$(".tab").on('click',".deleteBlog",function () {
var a= $(this).parents("tr").remove();
});
上一篇: BZOJ3832 : [Poi2014]Rally
下一篇: [POI2014] RAJ-Rally