jquery添加及删除节点

<script language="JavaScript">
  //<button id="addUser">提交</button>
  $("#addUser").click(function(){
   /*
    * 姓名: <input type="text" name="name" id="name" />&nbsp;&nbsp;
    email: <input type="text" name="email" id="email" />&nbsp;&nbsp;
    电话: <input type="text" name="tel" id="tel" /><br><br>
    */

//首先取得输入框里传入的三个值
   var $nameValue = $("#name").val();
   var $emailValue = $("#email").val();
   var $telValue = $("#tel").val();
   
   /*
    * <tr>
      <td>Jerry</td>
      <td>jerry@sohu.com</td>
      <td>8000</td>
      <td><a href="deleteEmp?id=Jerry">Delete</a></td>
     </tr>
    */
   //注意jquery创建标签的方法是直接在括号写入标签
   var $tr = $("<tr></tr>");
   
   var $nameTd = $("<td></td>");

  //为标签插入文本
   $nameTd.text($nameValue);
   
   var $emailTd = $("<td></td>");
   $emailTd.text($emailValue);
   
   var $telTd = $("<td></td>");
   $telTd.text($telValue);
   
   var $aTd = $("<td></td>");
   var $a = $("<a></a>");
   $a.attr("href","deleteEmp?id="+$nameValue);
   $a.text("Delete");

//$a追加到$Td里面
   $aTd.append($a);
   
   $tr.append($nameTd);
   $tr.append($emailTd);
   $tr.append($telTd);
   $tr.append($aTd);
   
   var $tbody = $("tbody");
   $tbody.append($tr);
   
   $a.click(function(){
    /*
     * <tr>
       <td>Jerry</td>
       <td>jerry@sohu.com</td>
       <td>8000</td>
       <td><a href="deleteEmp?id=Jerry">Delete</a></td>
      </tr>
     */

//得到父节点的父节点
    var $trElement = $a.parent().parent();
    //得到第一个子节点
    var $name = $trElement.children().eq(0).text();
    //弹出确认框
    var flag = confirm("你确认要删除"+$name+"这个用户吗?");
    
    if(!flag){
     //取消
     return false;
     
    }else{
     //确认
     $trElement.remove();
     
     return false;
    }
    
    /*
     *  * 获取指定元素的父元素:调用parent()方法
     *  * 获取指定元素的子元素:调用children()方法,返回的是所有子元素
     *  * eq()方法,获取第N个元素
     */
    
   });
  });
 

posted @ 2013-10-05 23:13  sadan  阅读(1793)  评论(0编辑  收藏  举报