动态表格(Java Script)
基于纯核心DOM
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.inputForm{
text-align: center;
}
.showForm{
text-align: center;
margin: 10px;
border: 1px black solid;
}
</style>
</head>
<body>
<div class="inputForm">
<input type="text" id="name" name="name" placeholder="请输入姓名">
<input type="text" id="gender" name="gender" placeholder="请输入性别">
<input type="button" id="btn_add" value="添加" onclick="add();">
</div>
<div class="showForm">
<table style="margin: auto">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4" id="sum">总人数: 0</td>
</tr>
</tfoot>
<tbody id="tbody">
</tbody>
</table>
</div>
<script>
var cnt=1;
setSum();
function setSum(){
var sum=document.getElementById("sum");
sum.removeChild(sum.firstChild);
sum.appendChild(document.createTextNode("总人数: "+(cnt-1)+""));
}
function add(qualifiedName, value){
var tbody=document.getElementById("tbody");
var tr=document.createElement("tr");
var td_id=document.createElement("td");
td_id.appendChild(document.createTextNode(cnt+""));
cnt++;
var td_name=document.createElement("td");
td_name.appendChild(document.createTextNode(document.getElementById("name").value));
var td_gender=document.createElement("td");
td_gender.appendChild(document.createTextNode(document.getElementById("gender").value));
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
var td_a=document.createElement("td");
var a=document.createElement("a");
a.setAttribute("href", "javascript:void(0);");
a.setAttribute("onclick", "remove(this);");
a.appendChild(document.createTextNode("删除"));
td_a.appendChild(a);
tr.appendChild(td_a);
tbody.appendChild(tr);
setSum();
}
function remove(obj){
var root=obj.parentNode.parentNode.parentNode;
var p=obj.parentNode.parentNode;
root.removeChild(p);
cnt--;
setSum();
}
</script>
</body>
</html>
基于HTML DOM
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.inputForm{
text-align: center;
}
.showForm{
text-align: center;
margin: 10px;
border: 1px black solid;
}
</style>
</head>
<body>
<div class="inputForm">
<input type="text" id="name" name="name" placeholder="请输入姓名">
<input type="text" id="gender" name="gender" placeholder="请输入性别">
<input type="button" id="btn_add" value="添加" onclick="add();">
</div>
<div class="showForm">
<table style="margin: auto">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4" id="sum">总人数: 0</td>
</tr>
</tfoot>
<tbody id="tbody">
</tbody>
</table>
</div>
<script>
var cnt=1;
setSum();
function setSum(){
var sum=document.getElementById("sum");
sum.removeChild(sum.firstChild);
sum.appendChild(document.createTextNode("总人数: "+(cnt-1)+""));
}
function add(qualifiedName, value){
var tbody=document.getElementById("tbody");
tbody.innerHTML+="<tr><td>"+cnt+"</td><td>"+
document.getElementById("name").value+"</td><td>"+
document.getElementById("gender").value+"</td><td>"+"<a href='javascript:void(0);' onclick='remove(this)'>删除</a>"+"</td></tr>";
cnt++;
setSum();
}
function remove(obj){
var root=obj.parentNode.parentNode.parentNode;
var p=obj.parentNode.parentNode;
root.removeChild(p);
cnt--;
setSum();
}
</script>
</body>
</html>
添加了一些选择特效
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.inputForm{
text-align: center;
}
.showForm{
text-align: center;
margin: 10px;
border: 1px black solid;
}
td{
width: 100px;
}
.mouseover{
background-color: pink;
}
.mouseout{
background-color: white;
}
</style>
</head>
<body>
<div class="inputForm">
<input type="text" id="name" name="name" placeholder="请输入姓名">
<input type="text" id="gender" name="gender" placeholder="请输入性别">
<input type="button" id="btn_add" value="添加">
</div>
<div class="showForm">
<table style="margin: auto">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4" id="sum">总人数: 0</td>
</tr>
</tfoot>
<tbody id="tbody">
</tbody>
</table>
</div>
<script>
var cnt=1;
setSum();
function setSum(){
var sum=document.getElementById("sum");
sum.removeChild(sum.firstChild);
sum.appendChild(document.createTextNode("总人数: "+(cnt-1)+""));
}
document.getElementById("btn_add").onclick=function (){
var tbody=document.getElementById("tbody");
tbody.innerHTML+="<tr><td>"+cnt+"</td><td>"+
document.getElementById("name").value+"</td><td>"+
document.getElementById("gender").value+"</td><td>"+"<a href='javascript:void(0);' onclick='remove(this)'>删除</a>"+"</td></tr>";
cnt++;
setSum();
attention();
}
function remove(obj){
var root=obj.parentNode.parentNode.parentNode;
var p=obj.parentNode.parentNode;
root.removeChild(p);
cnt--;
setSum();
}
function attention() {
var trs = document.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover=function (){
this.className="mouseover";
}
trs[i].onmouseout=function (){
this.className="mouseout";
}
}
}
</script>
</body>
</html>
