dom添加表格

来源：互联网发布：mac 中文输入法消失了编辑：程序博客网时间：2024/06/06 01:32

dom访问方法

1、document.getElementById();获取单个对象

2、document.getElementsByName();根据网页元素的name获取对

象获取的是节点列表(对象数组)

3、document.getElementsByTagName();根据网页标签的名称获取

对象节点列表(对象数组)

除了上述基本的访问方式，还有一些辅助

node.firstChild 获取node第一个子节点对象

node.lastChild 获取node的最后一个子节点

node.parentNode 获取node的父节点对象

node.childNodes 获取node的所有的子节点，返回节点列表(对象

数组)

node.hasChildNodes() 判断是否有子节点，如果有的话返回true

否则返回false

node.tagName 获取node的元素名称

如果不是元素的话，不能使用tagName

previousSibling上一个节点

nestSibling下一个节点

nodeName节点名称

nodeValue

实例：使用dom实现9*9的乘法表

思路：

1、创建一个表格table(9*9)

2、创建表格所需要的行数tr

使用循环的方式创建

3、创建表格所需的列td

使用循环的方式创建

4、创建文本内容text

使用循环的方式创建

5、依次追加文本 >>td>>tr>>table>>div

div{

background:#F99;

width:500px;

height:300px;

}

table{

border:#03C 1px dashed;

}

</style>

思路：

1、创建一个表格table(9*9)

2、创建表格所需要的行数tr

使用循环的方式创建

3、创建表格所需的列td

使用循环的方式创建

4、创建文本内容text

使用循环的方式创建

5、依次追加文本 >>td>>tr>>table>>div

//绘制表格

function drawTable(){

//创建一个表格

var table=document.createElement("table");

//给表格加上边框

table.setAttribute("border",1);

//外层循环控制行数

for(var i=1;i<=9;i++){

//循环创建tr

var tr=document.createElement("tr");

//内层循环创建列数

for(var j=1;j<=i;j++){

//先创建text

var text=document.createTextNode(j+"*"+i+"="+i*j);

//创建列

var td=document.createElement("td");

//文本追加到td

td.appendChild(text);

//td追加到tr

tr.appendChild(td);

}

//tr追加到table

table.appendChild(tr);

}

//table追加到div中

document.getElementById("d1").appendChild(table);

}

//删除table的行

function delTable(){

//获得table

var tr=document.getElementsByTagName("tr");

//获得table

var table=tr[0].parentNode;

////根据table删除tr 移除最后一行

table.removeChild(tr[tr.length-1]);

}

//非常重要

function getClass(){

document.getElementById("d1").className="bbb";

alert(document.getElementById("d1").className);

}

</script>

</head>

<body>

</body>

</html>

使用dom添加和删除表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#d1{

width:500px;

height:300px;

background:#F66;

}

</style>

//刷新时只显示表头

var flag=true;

//添加时只显示增加行数，不再重复添加表头

var fg=false;

//删除时传id

var idd=1;

function addtable(){

var username=document.getElementById("username").value;

var sex=document.getElementById("sex").value;

var phone=document.getElementById("phone").value;

var mail=document.getElementById("mail").value;

//var add=document.getElementById("button").value;

//创建表格

var table=document.createElement("table");

table.setAttribute("border",1);

table.setAttribute("width",500);

table.setAttribute("height",40);

//th

var arr=new Array("姓名","性别","电话","邮箱","操作");

//添加删除按钮

var input=document.createElement("input");

input.setAttribute("type","button");

input.setAttribute("value","删除");

//tr

var str=new Array(username,sex,phone,mail,"");

//创建表头

if(flag){

for(var i=1;i<=1;i++){

var tr=document.createElement("tr");

for(var j=1;j<=5;j++){

//th内容

var text1=document.createTextNode(arr[j-1]);

var th=document.createElement("th");

th.appendChild(text1);

tr.appendChild(th);

}

table.appendChild(tr);

}

//创建表的内容

if(fg){

//行数

for(var i=1;i<=1;i++){

var tr=document.createElement("tr");

tr.setAttribute("align","center");

for(var j=1;j<=5;j++){

//tr内容

var text=document.createTextNode(str[j-1]);

var td=document.createElement("td");

if(j==5){

//把按钮添加到td中

td.appendChild(input);

input.setAttribute("id","aa"+idd);

//alert(idd);

input.setAttribute("onclick","deltable(this.id)");

}

td.appendChild(text);

tr.appendChild(td);

}

table.appendChild(tr);

}

idd+=1;

}

document.getElementById("d1").appendChild(table);

flag=false;

fg=true;

}

//删除行

function deltable(did){

// var input=document.getElementsByTagName("input");

// var table=input[0].parentNode.parentNode.parentNode;

//alert(table.tagName);

//alert(input[did-1]);

//table.removeChild(tr[tr.length-1]);

var input=document.getElementById(did);

var table=input.parentNode.parentNode.parentNode;

//alert(table.nodeName);

// alert(did);

//alert(table.firstChild.tagName);

table.removeChild(input.parentNode.parentNode);

//alert(document.getElementsByTagName("tr").length);

}

</script>

</head>

姓名：<input type="text" id="username" name="username"/>

性别：<input type="text" id="sex" name="sex"/><br><br>

电话：<input type="text" id="phone" name="phone"/>

邮箱：<input type="text" id="mail" name="mail"/><br><br>

</form>

</body>

</html>