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>