JQuery实现动态添加删除评论的方法


Posted in Javascript onMay 18, 2015

本文实例讲述了JQuery实现动态添加删除评论的方法。分享给大家供大家参考。具体实现方法如下:

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

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
基于iScroll实现下拉刷新和上滑加载效果
Jul 18 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
TypeError document.getElementById(...) is null错误原因
May 18 #Javascript
JQuery实现带排序功能的权限选择实例
May 18 #Javascript
JQuery中clone方法复制节点
May 18 #Javascript
分享十五款 jQuery 社交网络分享插件
May 16 #Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 #Javascript
js实现精美的图片跟随鼠标效果实例
May 16 #Javascript
js实现精美的银灰色竖排折叠菜单
May 16 #Javascript
You might like
php网上商城购物车设计代码分享
2012/02/15 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
JavaScript 学习笔记(十一)
2010/01/19 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python 默认参数问题的陷阱
2016/02/29 Python
Django验证码的生成与使用示例
2017/05/20 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
python通过cython加密代码
2020/12/11 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
中海讯通笔试题
2015/09/15 面试题
Exception类的常用方法
2012/06/16 面试题
高中生学习生活的自我评价
2013/11/27 职场文书
自我评价范文点评
2013/12/04 职场文书
烹调加工管理制度
2014/02/04 职场文书
洗车工岗位职责
2014/03/15 职场文书
班级学习计划书
2014/04/27 职场文书
限期整改通知书
2015/04/22 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书