jQuery中动态添加和删除行

最新推荐文章于 2022-03-31 19:02:47 发布

这条路黑到底

最新推荐文章于 2022-03-31 19:02:47 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/chaplinlong/article/details/51276807

jQuery 专栏收录该内容

7 篇文章

订阅专栏

这里，先看网页代码。

<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使用方法。