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 相关文章推荐
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
Angularjs中controller的三种写法分享
Sep 21 Javascript
Javascript动画效果(3)
Oct 11 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 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中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
小程序云开发实战小结
2018/10/25 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python实现批量检测HTTP服务的状态
2016/10/27 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
Python 多维List创建的问题小结
2019/01/18 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
教育孩子心得体会
2014/01/01 职场文书
客户表扬信范文
2014/01/10 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
员工工作自我评价
2014/09/26 职场文书
初中英语教学随笔
2015/08/15 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers
基于Python实现西西成语接龙小助手
2022/08/05 Golang
MySQL新手入门进阶语句汇总
2022/09/23 MySQL