JQuery implementiert die Methode zum dynamischen Hinzufügen und Löschen von comments

JQuery implementiert die Methode zum dynamischen Hinzufügen und Löschen von comments_jquery

WBOY

Freigeben： 2016-05-16 15:58:36

Original

1479 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode zum dynamischen Hinzufügen und Löschen von Kommentaren mithilfe von JQuery. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

<!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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.