jQuery实现动态添加tr到table的方法


Posted in Javascript onDecember 26, 2016

本文实例讲述了jQuery实现动态添加tr到table的方法。分享给大家供大家参考,具体如下:

运行效果图如下:

jQuery实现动态添加tr到table的方法

完整代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>添加用户</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  </head>
  <body>
    <center>
      <br><br>
      添加用户:<br><br>
      姓名: <input type="text" name="name" id="name" />
      email: <input type="text" name="email" id="email" />
      电话: <input type="text" name="tel" id="tel" /><br><br>
      <button id="addUser">提交</button>
      <br><br>
      <hr>
      <br><br>
      <table id="usertable" border="1" cellpadding="5" cellspacing=0>
        <tbody>
          <tr>
            <th>姓名</th>
            <th>email</th>
            <th>电话</th>
            <th> </th>
          </tr>
          <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=Tom">Delete</a></td>
          </tr>
          <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=Jerry">Delete</a></td>
          </tr>
        </tbody>
      </table>
    </center>
  </body>
  <script>
    $(document).ready(function(){
      $("#addUser").click(function(){
        var name = $("#name").val();
        var email = $("#email").val();
        var tel = $("#tel").val();
        var $tr = $("<tr>"+
        "<td>"+name+"</td>"+
        "<td>"+email+"</td>"+
        "<td>"+tel+"</td>"+
        "<td><a href='deleteEmp?id="+name+"'>删除</a></td>"
        +"</tr>");
        var $table = $("#usertable");
        $table.append($tr);
        $tr.children().children().click(function(){
          //alert($(domEle).parent().parent().children(":first").text());
            //方法1.
//           $(domEle).parent().parent().remove();
//           return false;
            //方法2.
            return deleteTr($tr);
        });
        //不能在这里 给每个<a> 加事件 ,每add一次就each一次,会重复弹出confirm
//       $("tr td a").each(function(index,domEle){
//         $(domEle).click(function(){
//           //alert($(domEle).parent().parent().children(":first").text());
//           //方法1.
////            $(domEle).parent().parent().remove();
////            return false;
//           //方法2.
//           return deleteTr($(domEle).parent().parent());
//         });
//
//       });
      });
      function deleteTr(aObject) {
        var flag = window.confirm("您确定要删除"+aObject.children(":first").text()+"名称的值吗?");
//      alert(flag);
         if(!flag){
          return false;
         } else {
          aObject.remove();
          return false;
         }
        return false;
      }
    })
  </script>
</html>

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

Javascript 相关文章推荐
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
详解js的六大数据类型
Dec 27 Javascript
jQuery实现文档树效果
Feb 20 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
js正则匹配markdown里的图片标签的实现
Mar 24 Javascript
浅谈JavaScript的计时器对象
Dec 26 #Javascript
js模糊查询实例分享
Dec 26 #Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 #Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 #Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 #Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 #Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 #Javascript
You might like
php 静态化实现代码
2009/03/20 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
php之Memcache学习笔记
2013/06/17 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
jQuery替换textarea中换行的方法
2015/06/10 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
python使用chardet判断字符串编码的方法
2015/03/13 Python
python类和继承用法实例
2015/07/07 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python获取引用对象的个数方式
2019/12/20 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
学习雷锋寄语大全
2014/04/11 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
升学宴答谢词
2015/01/05 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
Redis分布式锁Redlock的实现
2021/08/07 Redis
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers