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 select下拉框操作常用方法
Nov 09 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
Vue Render函数原理及代码实例解析
Jul 30 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部分常见问题总结
2006/10/09 PHP
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
基于php-fpm的配置详解
2013/06/03 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
php实现贪吃蛇小游戏
2016/07/26 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
JQuery的自定义事件代码,触发,绑定简单实例
2013/08/01 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python selenium文件上传方法汇总
2020/11/19 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
使用python画社交网络图实例代码
2019/07/10 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
保密工作实施方案
2014/02/24 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
保管员岗位职责
2015/02/14 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
国博复兴之路观后感
2015/06/02 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
转变工作作风心得体会
2016/01/23 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python