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 相关文章推荐
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
vue-ajax小封装实例
Sep 18 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
mpvue全局引入sass文件的方法步骤
Mar 06 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 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
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
简单学习Python多进程Multiprocessing
2017/08/29 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
itchat接口使用示例
2017/10/23 Python
解决python3爬虫无法显示中文的问题
2018/04/12 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
2013年保送生自荐信格式
2013/11/20 职场文书
零件设计自荐信范文
2013/11/27 职场文书
暑期社会实践学生的自我评价
2014/01/09 职场文书
试用期转正鉴定评语
2014/01/27 职场文书
军训感想500字
2014/02/20 职场文书
对祖国的寄语大全
2014/04/11 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
离婚协议书范文
2015/01/26 职场文书
质量保证书怎么写
2015/02/27 职场文书
欢迎新生标语2015
2015/07/16 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL