appendChild简单表格的增删改查

---恢复内容开始---

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>

//首先定义一个文档第一次加载时的函数
window.onload = function () {
var oName = document.getElementById('name');//定义变量，来接收文本框id=name的值----下同
var oSex = document.getElementById('sex');
var oAge = document.getElementById('age');
var oHobby = document.getElementById('hobby');
var oTab = document.getElementById('table1');
var oBtn = document.getElementById('btn1');

var ID = oTab.rows.length;//获取表格的长度
oBtn.onclick = function () {//一个匿名函数供oBtn的点击事件使用
var oTr = document.createElement('tr');//添加第一行

//添加编号列
var oTd = document.createElement('td');//添加第一列
oTd.innerHTML = ID++;//给第一行第一列赋值，也就是获取的表格的长度+1，实现编号自增
oTr.appendChild(oTd);//利用appendChild()方法将第一列的给了第一行

//添加姓名列

var oTd = document.createElement('td');
oTd.innerHTML = oName.value;//将文本框姓名的值给了第二列
oTr.appendChild(oTd);//将第二列添加到第一行

//添加性别列（这里用的时直接赋值的方法，有兴趣的人可以使用单选框）

var oTd = document.createElement('td');//创建第三列
oTd.innerHTML = oSex.value;
oTr.appendChild(oTd);

//添加年龄列

var oTd = document.createElement('td');
oTd.innerHTML = oAge.value;
oTr.appendChild(oTd);

//添加爱好列

var oTd = document.createElement('td');
oTd.innerHTML = oHobby.value;
oTr.appendChild(oTd);

//添加删除列（操作）

var oTd = document.createElement('td');
oTd.innerHTML = '<a href="javascript:;">删除</a>';
oTr.appendChild(oTd);

//带墨绿色的是删除操作

//进行删除操作

//选出tdi里面的第一个a标签，然后给他一个事件，

//获取所有a标签的第一个a标签的onclick事件
oTd.getElementsByTagName('a')[0].onclick = function () {
oTab.removeChild(this.parentNode.parentNode);//利用removeChild()方法----删除他的父级的父级，也就是删除tr级别
}

//将创建的tr元素添加到table中，这就完成了添加的操作了

oTab.appendChild(oTr);
}

//关于搜索模块
//区分大小写.toLowerCase
//模糊搜索 search
//多个关键词的搜索
var oName2 = document.getElementById('name2');
var oBtn2 = document.getElementById('btn2');

oBtn2.onclick = function () {
for (var i = 0; i < oTab.rows.length; i++) {
var sTab= oTab.rows[i].cells[1].innerHTML.toLowerCase();
var sName2 = oName2.value.toLowerCase();

var arr = sName2.split(' ');//以空格隔开多个关键字

//利用search()方法进行多个字符的查询

if (sTab.search(sName2)!=-1) {
oTab.rows[i].style.background = "yellow";
}
else
{
oTab.rows[i].style.background = "";

}
};
};

};
</script>
</head>
<body>
姓名:<input type="text" id="name" />
性别:<input type="text" id="sex" />
年龄:<input type="text" id="age" />
爱好:<input type="text" id="hobby" />
<input type="button" id="btn1" value="提交" /><br />
姓名:<input type="text" id="name2" />
<input type="button" id="btn2" value="搜索" />
<table id="table1" border="1" cellspacing="0" width="350">
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>爱好</td>
<td>操作</td>
</tr>
</table>
</body>
</html>

appendChild简单表格的增删改查

猜你喜欢