简单的网页信息管理增删改查（html js实现）

一个简单的网页管理信息，可以添加姓名年龄，也可以单独对每行的数据进行删除修改，还可以进行查询操作

html代码

记录列表</br></br>
		姓名: <input type="text" name="name" id="name" placeholder="姓名" />
		年龄: <input type="text" placeholder="年龄" />
		<input type="button" value="添加" onclick="testadd()">
		</br></br>
		姓名：<input type="text" name="sname" id="sname" placeholder="姓名" />
		<input type="button"  value="查询" onclick="testselect()"/>
		</br></br>
		<table style="border: 1px solid black;width: 600px;">
			<thead>
				<tr>
					<th style="width: 15%; text-align: center">ID</th>
					<th style="width: 30%; text-align: left">姓名</th>
					<th style="width: 30%; text-align: left">年龄</th>
					<th style="width: 25%; text-align: left">操作</th>
				</tr>
			</thead>
			<tbody id="tbody">

			</tbody>
		</table>

JS代码

<script type="text/javascript">
			var inputs = document.getElementsByTagName("input"); //获得输入标签的全部对象作为一个数组
			var vid = 1; //id
			function testselect() {
				var name = inputs[3].value;
				var rows = document.getElementsByTagName("tr");
				
				for (var i = 1; i < rows.length; i++) {
					var temp = rows[i].cells[1].innerHTML;
					rows[i].removeAttribute("style");//把每行的的样式清空
				}
				if (name == '') {//如果输入为空 结束方法
					return;
				}
				for (var i = 1; i < rows.length; i++) {
					var temp = rows[i].cells[1].innerHTML;//获得每行第二个的值
					if (temp.indexOf(name) > -1) {
						rows[i].style.backgroundColor = 'yellow';
					}
				}
			}

			function testadd() { //添加方法
				var val_name = inputs[0].value; //获得输入name
				var val_age = inputs[1].value; //获得输入age

				var tr = document.createElement("tr"); //创建tr对象  行对象

				var td_id = document.createElement("td"); //创建tr行里面的列对象  即id
				td_id.innerText = vid++;
				tr.appendChild(td_id); //向tr中添加子节点td id

				var td_name = document.createElement("td");
				td_name.innerText = val_name;
				tr.appendChild(td_name);

				var td_age = document.createElement("td");
				td_age.innerText = val_age;
				tr.appendChild(td_age);

				var td_opt = document.createElement("td");
				td_opt.innerHTML = '<a href="javascript:;">删除</a>&nbsp&nbsp<a href="javascript:;">修改</a>'
				var atags = td_opt.getElementsByTagName("a"); //a标签对象数组
				atags[0].onclick = testdel; //第一个a标签 删除功能
				atags[1].onclick = testupd;
				tr.appendChild(td_opt);

				document.getElementById("tbody").appendChild(tr); //向tbody标签中添加字标签tr
			}

			function testdel() {
				var temp = this.parentNode.parentNode; //找到当前对象的前一个对象的前一个对象
				if (confirm("是否要删除该行记录？")) {
					document.getElementById("tbody").removeChild(temp);
				}
			}

			function testupd() {
				var thistd = this.parentNode;
				var td_age = thistd.previousSibling; //同一级前一个对象标签
				var td_name = td_age.previousSibling;
				var td_id = td_name.previousSibling;
				//把姓名和年龄两个对象标签换成下面的字符串  操作标签换成保存
				//多个保存时 不知道保存哪一个 需要唯一标识作为id 确定保存哪个   
				td_age.innerHTML = "<input type ='text' id ='tAge" + td_id + "' value='" + td_age.innerHTML + "'>";
				td_name.innerHTML = "<input type ='text' id ='tName" + td_id + "' value='" + td_name.innerHTML + "'>";
				thistd.innerHTML = "<a href= 'javascript:;'>保存</a>"
				//给保存一个功能事件
				thistd.getElementsByTagName("a")[0].onclick = function() {
					//取得输入的修改后的值
					td_age.innerHTML = document.getElementById('tAge' + td_id).value;
					td_name.innerHTML = document.getElementById('tName' + td_id).value;
					//把功能标签换成原来的删除修改
					thistd.innerHTML = '<a href="javascript:;">删除</a>&nbsp&nbsp<a href="javascript:;">修改</a>'
					var atags = thistd.getElementsByTagName("a");
					atags[0].onclick = testdel;
					atags[1].onclick = testupd;
				}

			}
		</script>