search

Home >Web Front-end >JS Tutorial >JQuery implements the method of dynamically adding and deleting comments_jquery

JQuery implements the method of dynamically adding and deleting comments_jquery

WBOY
WBOYOriginal
2016-05-16 15:58:361486browse

The example in this article describes the method of dynamically adding and deleting comments using JQuery. Share it with everyone for your reference. The specific implementation method is as follows: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加评论</title>
<style type="text/css">
#tbList td,#tbList th{border:1px solid #000;padding:5px;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
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 = "<tr><th>ID</th><th>姓名</th><th>邮箱</th><th>性别</th><th>操作</th></tr>";
 $("#tbList").append($th); //添加表头
 for (var i = 0; i < jsonArr.length; i++) {
  //最后一列放一个空的内容，给删除链接留位置
  var $tr = $("<tr><td>" + jsonArr[i].id + "</td><td>" +
     jsonArr[i].name + "</td><td>" +
     jsonArr[i].eamil + "</td><td>" +
     jsonArr[i].gender + "</td><td></td></tr>");
  var $link = $("<a href='javascript:void(0)'>删除</a>");
  $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 = $("<tr><td>" + id + "</td><td>" + name + "</td><td>" +
     email + "</td><td>" +
     gender + "</td><td></td></tr>");
  var $link = $("<a href='javascript:void(0)'>删除</a>");
  $link.click(function () {
   $(this).parent().parent().remove();
  });
  $("td:last", $tr).append($link);
  $("#tbList").append($tr);
 });
});  
</script>
</head>
<body>
ID：<input type="text" id="txtID" />
姓名：<input type="text" id="txtName" />
email：<input type="text" id="txtEmail" />
性别：<input type="text" id="txtGender" /><br />
<input id="btnAdd" type="button" value="添加" />
<br />
<table id="tbList">
</table>
</body>
</html>

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JQuery team selection example_jqueryNext article：JQuery team selection example_jquery

Related articles

See more