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 相关文章推荐
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
js date 格式化
Feb 15 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
vue更改数组中的值实例代码详解
Feb 07 Javascript
json_decode 索引为数字时自动排序问题解决方法
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
配置支持SSI
2006/11/25 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
实例分析js和C#中使用正则表达式匹配a标签
2014/11/26 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
jquery replace方法去空格
2017/05/08 jQuery
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
vue+Element-ui实现登录注册表单
2020/11/17 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python实现求数列和的方法示例
2018/01/12 Python
分分钟入门python语言
2018/03/20 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
商场促销活动方案
2014/02/08 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
创先争优活动心得体会
2014/09/04 职场文书
世界遗产的导游词
2015/02/13 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
总经理致辞
2015/07/29 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS