jQuery中动态添加和删除行

来源：互联网发布：口语培训班知乎编辑：程序博客网时间：2024/05/16 06:37

这里，先看网页代码。

<body><table  width="800" border="0" cellspacing="0" cellpadding="0">  <tr bgcolor="#EBE7DC">    <td><input type="checkbox"/></td>    <td>姓名</td>    <td>性别</td>    <td>卡号</td>    <td>会员级别</td>    <td>电话号码</td>    <td>出生年月日</td>    <td>消费金额</td>    <td>&nbsp;</td>  </tr>  <tr bgcolor="#FAF3E9">    <td><input  type="checkbox"/></td>    <td>张三</td>    <td>男</td>    <td>6565654315321321</td>    <td>短工</td>    <td>18625455412</td>    <td>1995-12-09</td>    <td>10,000.00</td>    <td>        <img  class="add" src="images/add.jpg" alt="" />        <img class="del" src="images/del.jpg" alt=""/>    </td>  </tr>  <tr bgcolor="#FEFAF7">    <td><input  type="checkbox"/></td>    <td>张三</td>    <td>男</td>    <td>6565654315321321</td>    <td>短工</td>    <td>18625455412</td>    <td>1995-12-09</td>    <td>10,000.00</td>    <td>        <img  class="add" src="images/add.jpg" alt="" />        <img class="del" src="images/del.jpg" alt=""/>    </td>  </tr>    <tr bgcolor="#FAF3E9">    <td><input  type="checkbox"/></td>    <td>张三</td>    <td>男</td>    <td>6565654315321321</td>    <td>短工</td>    <td>18625455412</td>    <td>1995-12-09</td>    <td>10,000.00</td>    <td>        <img  class="add" src="images/add.jpg" alt=""/>        <img class="del" src="images/del.jpg" alt=""/>    </td>  </tr></table><a href="#" class="newone">新增</a></body>

样式很简单：

<style type="text/css" >*{    font-size:12px;}tr{    text-align:center;    height:40px;}</style>

这里使用live方法绑定并删除：

 $("table~a").click(function(){//      var $newinfo=$(//       " <tr bgcolor='#FEFAF7'>"//       +"<td>"+"<input  type='checkbox'/>"+"</td>"//       +"<td>张三</td>"//       +"<td>男</td>"//       +"<td>6565654315321321</td>"//       +"<td>短工</td>"//       +"<td>18625455412</td>"//       +"<td>1995-12-09</td>"//       +"<td>10,000.00</td>"//       +"<td>"//       +"<img  class='add' src='images/add.jpg' />"//       +"<img class='del' src='images/del.jpg' />"//       +"</td>"//       +"</tr>");//      //      $("table").append($newinfo);//      }); //      //      $(".del").live("click",(function(){//          //          $(this).parent().parent().remove();//          //          }));//             //        });

由于live方法在高板中被on代替，于是习惯改成：$(“.del”).on(“click”,(function(){
这样肯定是错的。

$(function() {          $("table~a").click(function(){               //创建新节点           var $tr=$("<tr bgcolor='#EBE7DC'>"                  +"<td><input  type='checkbox' /></td>"            +"<td>张11三</td>"            +"<td>男</td>"            +"<td>6565654315321321</td>"            +"<td>短工</td>"            +"<td>18625455412</td>"            +"<td>1995-12-09</td>"            +"<td>10,000.00</td>"            +"<td>"            +"<img  class='add' src='images/add.jpg' alt=''  /> "            +"<img  class='del' src='images/del.jpg' alt=''   />"            +"</td>"           +"</tr>");           $("table").append($tr);               });          $(document).on("click",".del",function(){            $(this).parent().parent().remove();        });        });

这样就可以了。注意on使用方法。

0 0