java动态表格_动态表格(Java Script)

动态表格(Java Script)

基于纯核心DOM

Title

.inputForm{

text-align: center;

}

.showForm{

text-align: center;

margin: 10px;

border: 1px black solid;

}

序号姓名性别操作

总人数: 0

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();

}

基于HTML DOM

Title

.inputForm{

text-align: center;

}

.showForm{

text-align: center;

margin: 10px;

border: 1px black solid;

}

序号姓名性别操作

总人数: 0

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+="

"+cnt+""+

document.getElementById("name").value+"

"+

document.getElementById("gender").value+"

"+" 删除"+"";

cnt++;

setSum();

}

function remove(obj){

var root=obj.parentNode.parentNode.parentNode;

var p=obj.parentNode.parentNode;

root.removeChild(p);

cnt--;

setSum();

}

添加了一些选择特效

Title

.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;

}

序号姓名性别操作

总人数: 0

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").οnclick=function (){

var tbody=document.getElementById("tbody");

tbody.innerHTML+="

"+cnt+""+

document.getElementById("name").value+"

"+

document.getElementById("gender").value+"

"+" 删除"+"";

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].οnmοuseοver=function (){

this.className="mouseover";

}

trs[i].οnmοuseοut=function (){

this.className="mouseout";

}

}

}