再一次记录已经是找到工作之后了,实习工作,工资很低,但是能学到东西就好了。
首先分析一下增加和删除的一些思路,增加:即获取用户在表单输入的数据,然后通过表格显示出来;删除,即点击“删除”,将删除表格中的一些数据。做好之后的大致是这样:
点击‘新增’按钮,把表单中的数据提交到表格内,点击表格中的‘删除’按钮,即删除当前行。
还是废话不多说,直接上代码
<table border="1" cellspacing="0" cellpadding="5px">
<tr>
<td>员工姓名</td>
<td>员工性别</td>
<td>员工编号</td>
<td>员工操作</td>
</tr>
<tr>
<td>李铁柱</td>
<td>男</td>
<td>007</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>王二狗</td>
<td>男</td>
<td>38</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>李鸭蛋</td>
<td>女</td>
<td>250</td>
<td>
<a href="#">删除</a>
</td>
</tr>
<tr>
<td>王二丫</td>
<td>女</td>
<td>251</td>
<td>
<a href="#">删除</a>
</td>
</tr>
</table>
<form action="">
姓名:<input type="text" value=" "><br>
性别:<input type="text" value=""><br>
编号:<input type="text" value=''><br>
<input type="button" value="新增">
<button type="button" >查看姓名和性别</button>
</form>
HTML内容比较简单,table加form的三个表单和两个按钮,即为上面的图中内容所显示。
接下来,去研究js代码,首先要获取DOM元素,并绑定按钮的点击事件。在这里说一下,先获取input内的value值,再去写按钮点击事件直接操作是存在问题的,第一次用户输入表单内的值,点击按钮获取,控制台会显示当前用户输入的值,但是当用户要重新修改值之后,再点击按钮获取,会发现获取的还是上一次的值,只要页面不刷新,都无法获取到用户在第一次之后再提交的值。所以,每一次获取都应该在点击按钮之后获取。
<script type="text/javascript">
var btn1 = document.querySelectorAll('input')[3];
var btn2 = document.querySelector('button');
//表单的内容 要在用户点击按钮之后获取,这样能获取到每一次用户所输入的值
btn2.onclick =function(){
var name = document.querySelectorAll('form input')[0].value;
var sex = document.querySelectorAll('input')[1].value;
var num = document.querySelectorAll('input')[2].value;
alert(name+' ,'+sex+','+num);
}
btn1.onclick = function(){
var name = document.querySelectorAll('form input')[0].value;
var sex = document.querySelectorAll('input')[1].value;
var num = document.querySelectorAll('input')[2].value;
// var allTr = document.querySelectorAll('tr');
var tr = document.createElement('tr');
var tbody = document.querySelector('tbody');
// 增减删除的a链接
var delA = document.createElement('a');
// 给a标签增加一个子节点 删除
delA.appendChild(document.createTextNode('删除'));
delA.setAttribute("href","#");
// console.log(delA);
var array = [name,sex,num,delA];
for(i=0;i<4;i++){
// 创建一个td节点
var td = document.createElement('td');
if (array[i] != "") {
if (i<3) {
td.appendChild(document.createTextNode(array[i]));
// 让创建的td找到他的父元素tr
tr.appendChild(td);
}else if (i=3) {
td.appendChild(array[i]);
tr.appendChild(td);
array[i].onclick = function(){
var flag = confirm('您确认要删除'+tr.children[0].innerText+'吗?')
if (flag) {
tr.parentNode.removeChild(tr);
}
}
}
}else {
alert("请输入正确的字符");
break;
}
}
// 让tr找到他真正的父亲tbody
tbody.appendChild(tr);
};
// 删除节点的功能
var allA = document.querySelectorAll('a');
for(i = 0; i <allA.length;i++){
allA[i].num = i;
allA[i].onclick = function(){
index = this.num;
var b = allA[index].parentNode.parentNode;
var flag = confirm('您确认要删除'+b.children[0].innerText +'吗?');
if (flag) {
// b == tr
b.parentNode.removeChild(b);
}
}
}
</script>
通过for循环,来增加四个td,并且将创建的数组(即用户输入的name,number ,sex,和 最后一个‘删除’的a标签)与每个td的内容相对应。在这里我用的一个if判断,当i<3的时候,将td节点添加,当i=3 的时候,添加a删除的标签,并且绑定点击删除事件。最后面的部分即为删除节点的代码,因为js的异步特点,所以只能通过用.num来存储每一个i,然后通过全部变量index来获取当前的i值。实现删除当前行的功能。
如果有不好的地方,还望及时指点批评。