2019-01-16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#s{
border: 1px solid black;
}
</style>
<script>
function add(){
var tab = document.getElementById("s");
var a =document.getElementById("a").value;
var b =document.getElementById("b").value;
var c =document.getElementById("c").value;
var tr =document.createElement("tr");
var td1 =document.createElement("td");
var td2 =document.createElement("td");
var td3 =document.createElement("td");
var td4 =document.createElement("input");
td1.innerText=a;
tr.appendChild(td1);
td2.innerText=b;
tr.appendChild(td2);
td3.innerText=c;
tr.appendChild(td3);
td4.setAttribute("value","删除");
td4.setAttribute("type","button");
tr.appendChild(td4);
td4.setAttribute("onclick","javascript:this.parentNode.remove()");
var h = document.getElementById("s").appendChild(tr);
}
</script>
</head>
<body>
<form>
<fieldset>
<table>
<tr>
<td width="100px">部门编号：</td>
<td><input type="text" size="20px" id="a"></td>
</tr>
<tr>
<td width="100px">部门名称：</td>
<td><input type="text" size="20px" id="b"></td>
</tr>
<tr>
<td width="100px">部门地址：</td>
<td><input type="text" size="20px" id="c"></td>
<td><input type="button" value="添加" onclick="add()"></td>
</tr>
</table>
<hr>
<table id="s" border="1px">
<tr>
<td>部门编号：</td>
<td>部门名称：</td>
<td>部门地址：</td>
<td width="20px"></td>
</tr>
<tbody>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
border: 1px solid red;
width: 200px;
height: 100px;
margin-bottom: 10px;
}
#div2{
border: 1px solid blue;
width: 180px;
font-size: 11px;
}
</style>
<script>
function move(){
var red =document.getElementById("div1");
var blue =document.getElementById("div2");
var hz =document.getElementById("z");
red.appendChild(blue);
hz.parentNode.removeChild(hz);
red.style.height="50px"
blue.style.margin = "10px";
red.parentNode.insertBefore(hz,red)
}
</script>
</head>
<body>
<div id="div1"><span id="z">红盒子</span></div>
<div id="div2">蓝盒子</div>
<input type="button" value="移动" onclick="move()" id="a">
</body>
</html>