jquery添加及删除节点
<script language="JavaScript">
//<button id="addUser">提交</button>
$("#addUser").click(function(){
/*
* 姓名: <input type="text" name="name" id="name" />
email: <input type="text" name="email" id="email" />
电话: <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个元素
*/
});
});