js仿数据库的添加与删除

最新推荐文章于 2023-08-04 15:16:49 发布

freeline_FLY

最新推荐文章于 2023-08-04 15:16:49 发布

阅读量1.7k

点赞数

分类专栏： JS 文章标签：数据库 input email xhtml javascript 电话

本文链接：https://blog.csdn.net/freeline_FLY/article/details/7303682

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加</title>
<style>
	table{
		width:500px;
		border:1px solid;
		}
</style>
<script language="javascript" type="text/javascript">
	function check(){
		//获取输入的值
		var name=document.getElementById("name").value;
		var sex=document.getElementById("sex").value;
		var phone=document.getElementById("phone").value;
		var email=document.getElementById("email").value;
		//获取表格对象
		var tab=document.getElementById("tab");
		//添加tr
		var tr=document.createElement("tr");
		//添加td
		var tddel=document.createElement("td");
		var tdname=document.createElement("td");
		var tdsex=document.createElement("td");
		var tdphone=document.createElement("td");
		var tdemail=document.createElement("td");
		//为td添加onclick事件
		tdname.setAttribute("onclick","update(this)");
		//添加删除按钮
		var del=document.createElement("input");
		del.type="button";
		del.setAttribute("onclick","dele(this)");
		del.value="删除";
		var update=document.createElement("input");
		update.type="button";
		update.setAttribute("onclick","update(this)");
		update.value="修改";
		//添加文本节点
		var textname=document.createTextNode(name);
		var textsex=document.createTextNode(sex);
		var textphone=document.createTextNode(phone);
		var textemail=document.createTextNode(email);
		//向td里添加按钮
		tddel.appendChild(del);
		//向td里添加文本节点
		tdname.appendChild(textname);
		tdsex.appendChild(textsex);
		tdphone.appendChild(textphone);
		tdemail.appendChild(textemail);
		//向tr里添加td
		tr.appendChild(tdname);
		tr.appendChild(tdsex);
		tr.appendChild(tdphone);
		tr.appendChild(tdemail);
		tr.appendChild(tddel);
		//向table里添加tr
		tab.appendChild(tr);
	}
	function dele(obj){
		var tab=document.getElementById("tab");
		var td=obj.parentNode;
		var tr=td.parentNode;
		tab.removeChild(tr);
		}
</script>
</head>

<body>
姓名：<input type="text" id="name" />
性别：<input type="text" id="sex" />
电话：<input type="text" id="phone" />
邮箱：<input type="text" id="email" />
<input type="button" οnclick="check()" value="提交" />
<table id="tab">
	<tr>
    	<td>姓名</td><td>性别</td><td>电话</td><td>邮箱</td><td>删除</td>
    </tr>
</table>
</body>
</html>

freeline_FLY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js仿数据库的添加与删除

添加 table{ width:500px; border:1px solid; } function check(){ //获取输入的值 var name=document.getElementById("name").value; var sex=document.getElementById("sex").value; var phone=documen
复制链接

扫一扫