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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
iview实现图片上传功能
Jun 29 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简单实现数组分页的方法
2016/04/30 PHP
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
Python常用小技巧总结
2015/06/01 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
工地安全检查制度
2014/02/04 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
党员干部学习心得体会
2016/01/23 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Java 在生活中的 10 大应用
2021/11/02 Java/Android
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL