ajax实现评论后如何清空,JQuery实现动态添加删除评论的方法

2023-05-16

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

添加评论

#tbList td,#tbList th{border:1px solid #000;padding:5px;}

var jsonArr =

[

{ "id": 1, "name": "1刘德华", "eamil": "123@126.com", "gender": "男" },

{ "id": 2, "name": "2刘德华", "eamil": "123@126.com", "gender": "女" },

{ "id": 3, "name": "3刘德华", "eamil": "133@126.com", "gender": "女" },

{ "id": 4, "name": "4郭富城", "eamil": "113@126.com", "gender": "女" },

{ "id": 5, "name": "5张学友", "eamil": "223@126.com", "gender": "男" },

{ "id": 6, "name": "6孙红雷", "eamil": "423@126.com", "gender": "男" }

];

function loadData() {

var $th = "

ID姓名邮箱性别操作";

$("#tbList").append($th); //添加表头

for (var i = 0; i < jsonArr.length; i++) {

//最后一列放一个空的内容,给删除链接留位置

var $tr = $("

" + jsonArr[i].id + "" +

jsonArr[i].name + "

" +

jsonArr[i].eamil + "

" +

jsonArr[i].gender + "

");

var $link = $("删除");

$link.click(function () { //注册删除事件

$(this).parent().parent().remove(); //删除当前行

});

$("td:last", $tr).append($link); //添加删除链接

$("#tbList").append($tr);

}

}

$(function () {

loadData();

//添加事件

$("#btnAdd").click(function () {

var id = $("#txtID").val();

var name = $("#txtName").val();

var email = $("#txtEmail").val();

var gender = $("#txtGender").val();

if ((id == "") || (name == "") || (email == "") || (gender == "")) {

alert("请输入完整的信息");

return;

}

var $tr = $("

" + id + "" + name + "" +

email + "

" +

gender + "

");

var $link = $("删除");

$link.click(function () {

$(this).parent().parent().remove();

});

$("td:last", $tr).append($link);

$("#tbList").append($tr);

});

});

ID:

姓名:

email:

性别:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ajax实现评论后如何清空,JQuery实现动态添加删除评论的方法 的相关文章

随机推荐