<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="sex" placeholder="请输入性别">
<input type="button" id="btn_add" value="添加记录">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>赵得帅</td>
<td>男</td>
<td><a href="javascript:void (0);" onclick="delStr(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
<td>女</td>
<td><a href="javascript:void (0);" onclick="delStr(this)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>男</td>
<td><a href="javascript:void (0);" onclick="delStr(this)">删除</a></td>
</tr>
</table>
<script>
var add = document.getElementById("btn_add");
add.onclick = function (){
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
var td_sex = document.createElement("td");
var text_sex = document.createTextNode(sex);
td_sex.appendChild(text_sex);
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void (0);");
ele_a.setAttribute("onclick","delStr(this);");
var text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
var tr = document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_sex);
tr.appendChild(td_a)
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
function delStr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
- innerHTML
标签体的设置和获取:innerHTML
使用html元素对象的属性
控制样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">div</div>
<script>
var div1 = document.getElementById("div1");
div1.innerHTML += "<input type='text'>";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2{
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<script>
var div1 = document.getElementById("div1");
div1.onclick = function (){
div1.style.border = "1px solid red";
div1.style.width = "200px";
div1.style.fontSize = "20px";
}
var div2 = document.getElementById("div2");
div2.onclick = function (){
div2.className = "d1";
}
</script>
</body>
</html>