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跨域问题之跨域iframe自适应大小实现代码
Jul 17 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
jquery 插件学习(五)
Aug 06 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
canvas实现图像截取功能
Feb 06 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
ES6 Promise对象概念及用法实例详解
Oct 15 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 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
js new Date()实例测试
2019/10/31 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
python分割文件的常用方法
2014/11/01 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
python实现加密的方式总结
2020/01/19 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
Old Navy加拿大官网:美式休闲服饰品牌
2017/09/26 全球购物
计算机专业自荐信
2013/10/14 职场文书
地球一小时倡议书
2014/04/15 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
老公保证书
2015/01/17 职场文书
体育教师个人总结
2015/02/09 职场文书
实施意见格式范本
2015/06/05 职场文书
步步惊心观后感
2015/06/12 职场文书
工作年限证明范本
2015/06/15 职场文书
《秋思》教学反思
2016/02/23 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript