---恢复内容开始---
<!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>