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

2019-11-19 18:16:07

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

上一篇：jquery无法为动态生成的元素添加点击事件的解决方法(推荐)

下一篇：浅谈JavaScript的计时器对象