1.,两个lable,两个input,便于用户输入我们的姓名与年龄
2.一个button,用来添加点击事件
3.一个表格table,table中有一个表头thead,一个tbody
最终基本结构如代码所示:
<div>
<label for="">用户名:</label>
<input type="text" id="user">
<label for="">年龄:</label>
<input type="text" id="age">
<button id="btn">添加</button>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody id="body">
</tbody>
</table>
</div>
构建好基本机构以后,我们来大致理顺一下我们的思路
1.给button定义一个点击事件,功能要求是点击button,在tbody中创建一行,并且在这一行中加入四个列
2.创建添加行的函数
3.创建添加列的函数
我们的大致思路就这么简单,接下来一步一步去实现吧!
为了实现功能,我们由小到大来写代码
1.定义函数创建列
我们需要定义一个函数,他的功能就是可以创建一个列。
【分析】由于我们创建的这个列,有普通列,有特殊列,所以,我们可以用两个参数,来进行判断,是不是需要创建特殊列。
//创建列
function createTd(islink, content) {
var Td = document.createElement('td');
//判断是不是添加链接列
if (islink) {
//创建链接
var link = document.createElement('a');
link.href = "javascript:void(0)";
link.innerHTML = content;
//把链接加入列
Td.appendChild(link);
//点击链接,删除行
link.onclick = function () {
if (confirm('确认删除?')) {
var myTr=this.parentNode.parentNode;
myTr.parentNode.removeChild(myTr);
}
}
} else {
Td.innerHTML = content;
}
return Td;
}
【分析】考虑到有特殊列的生成,我们设定两个参数,第一个参数islink用来判断是否是特殊列,第二个参数是内容,在函数中判定如果是特殊列,先创建一个a,将content赋值到a的内容中,把这个a加入到我们创建的td中,如果不是特殊列,就直接将内容赋值给td的内容;
2.定义函数创建行
定义一个函数,创建一个行,在这个行中创建四个列,并将列加入到这个行中,调用1步骤中的函数;
代码如下所示:
//创建行
function createTr(id,name,age) {
var Tr = document.createElement('tr');
//创建列
var Td1=createTd(false,id);
var Td2 = createTd(false, name);
var Td3 = createTd(false, age);
var Td4 = createTd(true, '删除');
//把列加入行中
Tr.appendChild(Td1);
Tr.appendChild(Td2);
Tr.appendChild(Td3);
Tr.appendChild(Td4);
return Tr;
}
【分析】首先我们需要创建一个行tr,然后调用创建列的函数,创建四个列,其中前三个为正常列,第四个为特殊列,最后将创建的列加入到我们创建的行当中,返回我们创建的这个行;
3.给button建立点击事件
在点击事件中,调用创建行的函数,达成效果点击一次,创建一行;
【分析】
1).由于我们的输入框,姓名和年龄两栏,比如都有值才能将信息添加到列内,所有我们要判断姓名输入框和年龄输入框的值是否为空字符串,而且一般来说我们的姓名不是数字类型,而年龄都是数字类型,所有需要判断一下姓名和年龄输入框的值是不是数字;
2).当我们每点击一次,执行一遍函数,添加一行,需要将我们的姓名输入框和年龄输入框清空,以便于用户输入下一组数据
3).我们的第一列的内容是根据我们的行数来进行变化的,为了使内容的编号随着我们的行数的变化而变化,我们需要设定一个,使得每调用一次函数即每增加一行,我们的编号就加一,这样就实现了编号随着行数的变化来变化了。这样的好处是,即使我们删除了某一行,接下来添加将会编码延续增加,不会重置,给已删除的行留有空间;
btn.onclick = function () {
if (user.value == '' || Age.value == '') {
alert('您的输入有误,请重新输入');
return;
}
var n = Number(user.value);
var h=Number(Age.value);
if(!isNaN(n)||isNaN(h)){
alert('您的输入有误,请重新输入');
return;
}
var Tr=createTr(i,user.value,Age.value);
Body.appendChild(Tr);
//编码根据点击行数增加
i++;
user.value='';
Age.value='';
}
注意:
在调用函数的最开始,我们需要先找到html中对应的id并重新来定义;
var btn = document.getElementById('btn');
var Body = document.getElementById('body');
var user = document.getElementById('user');
var Age = document.getElementById('age');
var i=0;
最终效果:
输入信息,点击添加,将信息加入重新创建的行中,可以实现删除效果。
通过写这个案例,在这个案例中主要练习了DOM中节点的创建,添加,调用等知识,让我对节点的增删改查有了很深刻的了解。