作业

最新推荐文章于 2021-06-10 13:07:58 发布

马利庆

最新推荐文章于 2021-06-10 13:07:58 发布

阅读量220

点赞数 1

分类专栏：作业文章标签：作业

本文链接：https://blog.csdn.net/weixin_43986534/article/details/86507596

版权

作业专栏收录该内容

53 篇文章 1 订阅

订阅专栏

2019.1.16作业

红盒子蓝盒子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				width: 200px;
				height: 100px;
				border: 1px solid red;
			}
			#div2{
				width: 200px;
				border: 1px solid blue;
				margin-top: 20px;
			}
		</style>
		<script>
			function a(){
				var div2 = document.getElementById("div2");
				div2.parentNode.removeChild(div2);
			}
			function b(){
				var div2 = document.getElementById("div2");
				var div1 = document.getElementById("div1");
				div2.appendChild(div1);
				div1.style.margin = "10px";
				div1.style.width="180px";
				div1.style.height="80px";
			}
			function c(){
				var div1 = document.getElementById("div1");
				var div2 = document.getElementById("div2");
				var h = document.getElementsByTagName("h2")[0];
				div1.appendChild(div2);
				div1.parentNode.insertBefore(h,div1);
			}
		</script>
	</head>
	<body>
		<div>
		<div id="div1"><h2>红盒子</h2></div>
		<div id="div2">蓝盒子</div>	
		</div>
		<input type="button" value="移动1" onclick="a()">
		<input type="button" value="移动2" onclick="b()">
		<input type="button" value="移动3" onclick="c()">
	</body>
</html>

添加表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function a(){
				var tr = document.createElement("tr");
				var td1 = document.createElement("td");
				var td2 = document.createElement("td");
				var td3 = document.createElement("td");
				var td4 = document.createElement("td");
				td1.innerText = document.getElementById("empno").value;
				td2.innerText = document.getElementById("ename").value;
				td3.innerText = document.getElementById("loc").value;
				table.appendChild(tr);
				tr.appendChild(td1);
				tr.appendChild(td2);
				tr.appendChild(td3);
				document.getElementsByTagName("body")[0].appendChild(table);
				table.setAttribute("border","1");
			}
		</script>
	</head>
	<body>
		<form>
			<table>
				<tr>
					<td>部门编号：</td>
					<td>
						<input type="text" id="empno">
					</td>
				</tr>
				<tr>
					<td>部门名称：</td>
					<td>
						<input type="text" id="ename">
					</td>
				</tr>
				<tr>
					<td>部门地址：</td>
					<td>
						<input type="text" id="loc">
					</td>
					<td>
						<input type="button" value="添加" onclick="a()">
					</td>
				</tr>
			</table>
			<hr />
			<table id="table">
				<tr>
					<td>部门编号</td>
					<td>部门名称</td>
					<td>部门地址</td>
				</tr>
			</table>
		</form>
	</body>
</html>

马利庆

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
作业

2019.1.16作业红盒子蓝盒子&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; #div1{ width: 200px; height: 100px
复制链接

扫一扫