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 相关文章推荐
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
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 远程图片保存到本地的函数类
2008/12/08 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
canvas绘制七巧板
2017/02/03 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
python多线程使用方法实例详解
2019/12/30 Python
Python测试线程应用程序过程解析
2019/12/31 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
python中Ansible模块的Playbook的具体使用
2020/05/28 Python
django rest framework使用django-filter用法
2020/07/15 Python
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
JDO的含义
2012/11/17 面试题
本科毕业生应聘求职信
2014/07/06 职场文书
委托书的格式
2014/08/01 职场文书
2014年党建工作总结
2014/11/11 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
公司年会主持词范文!
2019/05/07 职场文书
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle