javascript-DOM练习表格增删改

最新推荐文章于 2024-04-26 16:47:03 发布

大雄先生

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量193

点赞数 1

文章标签： javascript 前端经验分享

本文链接：https://blog.csdn.net/x1785551/article/details/122168113

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">

		</style>
	</head>
	<body>
		<form id="allform">
			姓名:<input type="text" value="" id="usrname" /><br />
			班级:<input type="text" value="" id="Classban" /><br />
			性别:<br />
			<input type="radio" name="sex" value="男" />男
			<input type="radio" name="sex" value="女" />女<br />
			年龄:<input type="text" id="age" value="" /><br />
			<button onclick="" id="add" type="button">增加</button>
		</form>
		<hr />
		<table border="1" id="tab00">
			<tr id="head0">
				<td id="head1">姓名</td>
				<td>班级</td>
				<td>年龄</td>
				<td>性别</td>
				<td>操作</td>
			</tr>
		</table>
	</body>
	<script type="text/javascript">
		window.onload = function() {

			document.getElementById("add").onclick = function() {
				var usrnameObj = document.getElementById("usrname");
				var classObj = document.getElementById("Classban");
				var sexObj = document.getElementsByName("sex");
				var sexvalue="";
				//单选钮按 获取按钮被选中的那个值
				if(sexObj[0].checked==true){
					sexvalue=sexObj[0].value;
				}else{
					sexvalue=sexObj[1].value;
				}
				var ageObj = document.getElementById("age");
				var tr1Obj = document.createElement("tr");
				var td1Obj = document.createElement("td");
				var td2Obj = document.createElement("td");
				var td3Obj = document.createElement("td");
				var td4Obj = document.createElement("td");
				var td5Obj = document.createElement("td");
				td1Obj.innerHTML = usrnameObj.value;
				td2Obj.innerHTML = classObj.value;
				td3Obj.innerHTML = sexvalue;
				td4Obj.innerHTML = ageObj.value;
				td5Obj.innerHTML = "删除";
				var tableObj = document.getElementById("tab00");
				tableObj.appendChild(tr1Obj);
				tr1Obj.appendChild(td1Obj);
				tr1Obj.appendChild(td2Obj);
				tr1Obj.appendChild(td3Obj);
				tr1Obj.appendChild(td4Obj);
				tr1Obj.appendChild(td5Obj);
				td5Obj.onclick = function() {
					var Isdel = window.confirm("确定删除吗?");
					if (Isdel == true) {
						tr1Obj.remove();
					}
				}
			}
		}
	</script>
</html>

大雄先生

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javascript-DOM练习表格增删改

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> </style> </head> <body> <form id="allform"> 姓名:<input type="text" value="" i.
复制链接

扫一扫