js-添加删除记录-增加、删除、修改

于 2022-10-24 19:17:50 发布
阅读量578 收藏 1
点赞数 1
分类专栏： javascript 文章标签： 1024程序员节 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47295886/article/details/127492555
版权

点击超链接：超链接会默认跳转---但是我们不希望跳转可以改成return false

confirm:弹出一个带有确认和取消按钮的提示框，需要一个字符串作为参数，该字符串将会作为提示文字出来

/*点击超链接 删除员工信息 --获取所有超链接*/
                var allA = document.getElementsByTagName("a"); //是数组

            //a中添加属性
                    a.href="javascript:;"

    //向a中添加文本
                    a.appendChild(deleteText);

            //创建一个tr 4个td 文本节点
                    var tr = document.createElement("tr");

    //创建a元素
                    var a = document.createElement("a");

        //创建文本节点
                    var nameText = document.createTextNode(name);

<!DOCTYPE html>
<html>
	<head>

		<meta charset="utf-8">
		<title></title>
		<script>
			//删除的函数
			function delA(){
				//this指向该超链接 
				var tr = this.parentNode.parentNode;
				//获取要删除的元素
				var name = tr.children[0].innerHTML;
				var result = confirm("你确定要删除" + name + "吗?");
				if (result) tr.parentNode.removeChild(tr);
				return false;
			}
			window.onload = function() {
				/*点击超链接 删除员工信息 --获取所有超链接*/
				var allA = document.getElementsByTagName("a"); //是数组
				//为每个超链接绑定函数
				for (i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {
					var name = document.getElementById("empName").value;
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;
					/*组合成该结构
					<tr>
						<td>Jerry</td>
						<td>jerry@sohu.com</td>
						<td>8000</td>
						<td><a href="deleteEmp?id=002">Delete</a></td>
					</tr>
					*/
					//创建一个tr 4个td 文本节点
					var tr = document.createElement("tr");
					var nametd = document.createElement("td");
					var emailtd = document.createElement("td");
					var salarytd = document.createElement("td");
					var atd = document.createElement("td")
					//创建a元素
					var a = document.createElement("a");
					//创建文本节点
					var nameText = document.createTextNode(name);
					var emailText = document.createTextNode(email);
					var salaryText = document.createTextNode(salary);
					var deleteText = document.createTextNode("Delete");
					//添加关系
					nametd.appendChild(nameText);
					emailtd.appendChild(emailText);
					salarytd.appendChild(salaryText);
					//a中添加属性
					a.href="javascript:;"
					//向a中添加文本
					a.appendChild(deleteText);
					a.onclick=delA;
					atd.appendChild(a);
					//td到tr中
					tr.appendChild(nametd);
					tr.appendChild(emailtd);
					tr.appendChild(salarytd);
					tr.appendChild(atd);
					//获取table:--浏览器上自动添加了table
					 var employeeTable=document.getElementById("employeeTable");
					 //获取内存employeeTable的tbody节点
					 var tbody=employeeTable.getElementsByTagName("tbody")[0];//f父元素的getElementsByTagName
					 tbody.appendChild(tr);
					
				}



			}
		</script>
		<style>
			#employeeTable {
				border-collapse: collapse;/合并边框 width: 307px;
				margin: 40px auto;
			}

			#employeeTable th {
				border: 1px solid black;
				width: 57px;
			}

			#employeeTable td {
				border: 1px solid black;
			}

			div {
				border: 1px black solid;
				width: 250px;
				padding: 10px;
				margin: 40px auto;
			}
		</style>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="deleteEmp?id=1">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
		</table>
		<div>
			<strong>添加新员工</strong>
			<table>
				<tr>
					<td class="word">name:</td>
					<td class="inp">
						<input type="text" name="empName" id="empName">
					</td>
				</tr>
				<tr>
					<td class="word">email:</td>
					<td class="inp">
						<input type="text" name="email" id="email">
					</td>
				</tr>
				<tr>
					<td class="word">salary:</td>
					<td class="inp">
						<input type="text" name="salary" id="salary">
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton" value="abc">Submit</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

 法二：使用innerHTML方法 直接合成节点

					/*组合成该结构
					<tr>
						<td>Jerry</td>
						<td>jerry@sohu.com</td>
						<td>8000</td>
						<td><a href="deleteEmp?id=002">Delete</a></td>
					</tr>
					*/
					//创建一个tr 4个td 文本节点
					var tr = document.createElement("tr");
					tr.innerHTML="<td>"+name+"</td>"+
					"<td>"+email+"</td>"+
					"<td>"+salary+"</td>"+
					"<td>"+"<a href='javascript:;'>Delete</a>"+"</td>";
					var a=tr.getElementsByTagName("a")[0];
					a.onclick=delA;
					//获取table:--浏览器上自动添加了table
					var employeeTable = document.getElementById("employeeTable");
					//获取内存employeeTable的tbody节点
					var tbody = employeeTable.getElementsByTagName("tbody")[0]; //f父元素的getElementsByTagName
					tbody.appendChild(tr);
<!DOCTYPE html>
<html>
	<head>

		<meta charset="utf-8">
		<title></title>
		<script>
			//删除的函数
			function delA() {
				//this指向该超链接 
				var tr = this.parentNode.parentNode;
				//获取要删除的元素
				var name = tr.children[0].innerHTML;
				var result = confirm("你确定要删除" + name + "吗?");
				if (result) tr.parentNode.removeChild(tr);
				return false;
			}
			window.onload = function() {
				/*点击超链接 删除员工信息 --获取所有超链接*/
				var allA = document.getElementsByTagName("a"); //是数组
				//为每个超链接绑定函数
				for (i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {
					var name = document.getElementById("empName").value;
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;
					/*组合成该结构
					<tr>
						<td>Jerry</td>
						<td>jerry@sohu.com</td>
						<td>8000</td>
						<td><a href="deleteEmp?id=002">Delete</a></td>
					</tr>
					*/
					//创建一个tr 4个td 文本节点
					var tr = document.createElement("tr");
					tr.innerHTML="<td>"+name+"</td>"+
					"<td>"+email+"</td>"+
					"<td>"+salary+"</td>"+
					"<td>"+"<a href='javascript:;'>Delete</a>"+"</td>";
					var a=tr.getElementsByTagName("a")[0];
					a.onclick=delA;
					//获取table:--浏览器上自动添加了table
					var employeeTable = document.getElementById("employeeTable");
					//获取内存employeeTable的tbody节点
					var tbody = employeeTable.getElementsByTagName("tbody")[0]; //f父元素的getElementsByTagName
					tbody.appendChild(tr);

				}



			}
		</script>
		<style>
			#employeeTable {
				border-collapse: collapse;/合并边框 width: 307px;
				margin: 40px auto;
			}

			#employeeTable th {
				border: 1px solid black;
				width: 57px;
			}

			#employeeTable td {
				border: 1px solid black;
			}

			div {
				border: 1px black solid;
				width: 250px;
				padding: 10px;
				margin: 40px auto;
			}
		</style>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td><a href="deleteEmp?id=1">Delete</a></td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td><a href="deleteEmp?id=002">Delete</a></td>
			</tr>
		</table>
		<div>
			<strong>添加新员工</strong>
			<table>
				<tr>
					<td class="word">name:</td>
					<td class="inp">
						<input type="text" name="empName" id="empName">
					</td>
				</tr>
				<tr>
					<td class="word">email:</td>
					<td class="inp">
						<input type="text" name="email" id="email">
					</td>
				</tr>
				<tr>
					<td class="word">salary:</td>
					<td class="inp">
						<input type="text" name="salary" id="salary">
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton" value="abc">Submit</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>
¡Venceremo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值