目录
一、实现功能:
二、涉及知识点
1、函数的写法：
2、confirm函数
3、获取父节点，以及通过父节点获取指定类型和位置的子节点
3、删除节点元素
4、获取节点元素的文本内容
5、val()函数和text()函数的区别
6、创建一个节点
7、挂载节点、插入节点
三、修改和默写
删除部分
删除函数
添加函数
附录：
重要体会：！之所以不用循环，是比方说$("#a")是一个数组，数组中有元素点击，如果下面写还是写选择器名那么就选了全部，所以应该使用this
一、实现功能:
用jQuery来写员工新增和删除
如图所示：按delete删除整行，输入empno,empname,sal点击添加添加到下方
原格式文件：写在附录
二、涉及知识点
1、函数的写法：
（不是由常见的加载事件触发的函数）
function 函数名(参数){
函数方法
}2、confirm函数
格式：confirm（字符串）—弹出一个确认框
返回一个布尔类型的值，当点击确定，返回true,点击取消返回false
if (confirm("是否删除" + ename + "的信息吗")) {
函数体
}3、获取父节点，以及通过父节点获取指定类型和位置的子节点
parent（）——获取指定节点的父节点
find(元素名)——获取指定节点下的子节点中的指定元素数组，可以隔代查找比如爷爷找孙子
eq(下标)——在find()之后获取该数组下标
格式:
$(js对象).parent().find("标签名").eq(下标)//获取某个元素3、删除节点元素
empty()——清空当前元素节点的后代元素
remove()——删除当前元素节点以及所有后代元素
$(js对象).remove();
$(js对象).delete();
4、获取节点元素的文本内容
text()——获取元素节点中的文本内容
格式:
$(js对象).parent().find("标签名").eq(下标).text()//获取某个元素5、val()函数和text()函数的区别
<td>张三</td>要获取张三就是text() 文本内容
要获取文本框中的内容就是val()
empno:<input class="input"type="text" id="empno"/> 6、创建一个节点
$("HTML代码")——我们需要将创建的节点html代码写入$（""）中即可
这里的$不是为了把js对象转成jQuery对象
7、挂载节点、插入节点
①appendTo 把新节点挂在在父节点的最后一个位置
2②新节点.prependTo(父节点)——将新节点挂在指定父节点下第一个位置
三、修改和默写
删除部分
首先写一个删除函数：写在窗体加载事件之外
function del(aNode) {//传入一个节点
//传入a节点下父节点的父节点的数组下标为1的值
var ename = $(aNode).parent().parent().eq(1);
if (confirm("是否删除" + ename + "的信息吗")) {
}//注意写函数的时候不要用常见的英文动词，有可能是关键字
$(aNode).parent().parent().remove;//注意这边标签a的父节点是td 不是tr，删除tr应该是父节点的父节点
//注意remove和parent都是jQuery的函数，aNode是js的对象应该转型
}修改：tr节点下 的数组是按元素分类的，哪怕四个元素都想相同，不应该写成
$(aNode).parent().parent().remove;需要通过find(元素名)来获取指定节点下的子节点中的指定元素数组
改正：
var ename = $(aNode).parent().parent().find("td").eq(1);注意点：
①注意写函数的时候不要用常见的英文动词，有可能是关键字
var ename = $(aNode).parent().parent().find("td").eq(1);② 注意这边标签a的父节点是td 不是tr，删除tr应该是父节点的父节点
<tr >
<td>1001</td>
<td>张三</td>
<td>8000</td>
<td><a href="#" name="type">delete</a></td>
</tr> ③注意remove和parent都是jQuery的函数，aNode是js的对象应该转型
$(aNode).parent().parent().remove;错误处：remove函数没写括号（）
empty()——清空当前元素节点的后代元素
remove()——删除当前元素节点以及所有后代元素
confirm的内容是节点元素的文本内容，不是节点元素本身
删除函数
function del(aNode) {//传入一个节点
//传入a节点下父节点的父节点的数组下标为1的值
var ename = $(aNode).parent().parent().find("td").eq(1).text();
if (confirm("是否删除" + ename + "的信息吗")) {
}//注意写函数的时候不要用常见的英文动词，有可能是关键字
$(aNode).parent().parent().remove();//注意这边标签a的父节点是td 不是tr，删除tr应该是父节点的父节点
//注意remove和parent都是jQuery的函数，aNode是js的对象应该转型
}
$(function () {
//删除
$("a").click(function () {
del(this);
})添加函数
$("#add").click(function () {
//读取元素
var empno = $("#empno").val();
var empname = $("#empname").val();
var sal = $("#sal").val();
var dele =$("<td><a href='#'>delete</a></td>");
//创建一个tr节点，注意转成jQuery 格式$（"js对象"）
var trNode =$("<tr></tr>");
$("<td>"+empno+"</td>").appendTo(trNode);
$("<td>"+empname+"</td>") .appendTo(trNode);
$("<td>"+sal+"</td>") .appendTo(trNode);
dele.appendTo(trNode);
trNode.find("a").click(function () {
del(this)
});//find可以隔代查找
trNode.appendTo($("#tab"));
})原格式文件：写在附录
附录：
①原格式文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
body{
text-align: center;
}
table,td,th{
border:1px solid black;
}
table{
border-collapse: collapse;
margin: 1px auto;
}
td,th{
panding:10px,20px
}
</style>
<script type="text/javascript">
$(function () {
//删除
$("a").click(function () {
$("a").parent().remove();
})
//新增
$("#add").click(function () {
var eno=$("#empno").val();
var ename=$("#empname").val();
var sal=$("#sal").val();
$("<th>"+eno+"</th>").
appendTo($("#game"));
$("<th>"+ename+"</th>").
appendTo($("#game"))
$("<th>"+sal+"</th>").
appendTo($("#game"))
})
})
</script>
</head>
<body>
<h3>员工管理系统</h3>
empno:<input class="input"type="text" id="empno"/>
empname:<input class="input" type="text" id="empname"/>
sal:<input class="input" type="text" id="sal"/>
<button id="add">添加</button>
<br/>
<br/>
<br/>
<br/>
<table id="tab">
<tr>
<th>empno</th>
<th>epname</th>
<th>sal</th>
<th></th>
</tr>
<tr >
<td>1001</td>
<td>张三</td>
<td>8000</td>
<td><a href="#" name="type">delete</a></td>
</tr>
<tr id>
<td>1002</td>
<td>李四</td>
<td>8500</td>
<td><a href="#" name="type">delete</a></td>
</tr>
</tr>
<tr id>
<td>1003</td>
<td>王五</td>
<td>9000</td>
<td><a href="#" name="type">delete</a></td>
</tr>
</table>
</body>
</html>问题;不会指a标签，会把delete列（a标签）全部删完！注意a节点的parent节点是td!
$("a").click(function () {
$(this).parent().parent().remove();
})常见jQuery选择器
①$（"元素名"）——元素选择器 标签
重要体会：！之所以不用循环，是比方说$("#a")是一个数组，数组中有元素点击，如果下面写还是写选择器名那么就选了全部，所以应该使用this
不会新增一个tr 使得td挂载在上面：
解决:
$("#add").click(function () {
var eno = $("#empno").val();
var ename = $("#empname").val();
var sal = $("#sal").val();
var del
= "<td><a href='#'>delete</a></td>";//注意不要占用关键字
var trNode = $("<tr></tr>");
$("<td>" + eno + "</td>").appendTo(trNode);
$("<td>" + ename + "</td>").appendTo(trNode)
$("<td>" + sal + "</td>").appendTo(trNode)
$(del).appendTo(trNode);
trNode.appendTo($("#tab"));
})缺点;虽然也叫"a"但是不能删除，必须把删除功能分开赋值给
改进：
//新增
$("#add").click(function () {
var eno = $("#empno").val();
var ename = $("#empname").val();
var sal = $("#sal").val();
var del
= "<td><a href='#'>delete</a></td>";//注意不要占用关键字
var trNode = $("<tr></tr>");
$("<td>" + eno + "</td>").appendTo(trNode);
$("<td>" + ename + "</td>").appendTo(trNode)
$("<td>" + sal + "</td>").appendTo(trNode)
$(del).appendTo(trNode);
trNode.find("a").click(function () {
$(this).parent().parent().remove();
});
trNode.appendTo($("#tab"));6、parent（）——获取指定节点的父节点
find(元素名)——获取指定节点下的子节点中的指定元素数组
eq(下标)——在find()之后获取该数组下标
