黑马程序员-DOM（第四讲）

上讲的内容在ie6运行每有问题，但是你会发现在ie7和火狐运行都会有问题，这是由于浏览器内核的解析方式不同造成的。

实例：做个好友菜单（类似qq），完成展开闭合效果

<table id=“goodlist”>

<tr>

<td>

<a href=”javascript:void(0)” onclick=”list(this)”>好友菜单</a>

<ul>

<li>一个好友</li>

<li>一个好友</li>

<li>一个好友</li>

 

</ul>

</td>

</tr>

</table>

 

<style type=”text/css”>

table ul

{

list-style:none;

margin:0px;

}

 

//对表格框线进行定义，以及单元格的框线进行定义

table,table td

{

border:#8080ff 1px solid;

}

 

table td a:link,table td a:visited{

color:#1f6dff;

text-decoration:none;

}

</style>

 

 

怎么让好友列表隐藏呢？

我们用另一个布局display

在table ul{

在这里加上 display：none；

}

 

 

预定义一些样式：

.open{

display:block;

}

.close{

display:none;

}

 

<script type=”text/javascript”>

//获取被操作的节点ul，先通过事件源超链接标签获取其父节点td，然后再通过父节点获取ul节点（为什么不直接获取超链接的兄弟节点呢？这是考虑到在火狐中的情况）

function list(node)

{

var oTdNode=node.parentNode;

var oUlNode=oTdNode.getElementsByTagName(“ul”)[0];

if(oUlNode.className==”open”)

{

oUlNode.className=”close”;

}

else

{

oUlNode.className=”open”;

 

}

}

</script>

 

现在想要实现开一个而关其他

首先获取到表格节点

var oTabNode=document.getElementById(“goodlist”);

var collUlNodes=oTabNode.getElementByTagNames(“ul”);

for(var x=0;x<collUlNodes.length;x++)

{

if(collUlNodes[x]==oUlNode)

{

if(collUlNodes[x].className==”open”)

{

collUlNodes[x].className=”close”;

}

else

{

collUlNodes[x].className=”open”;

 

}

 

}

esle

{

collUlNodes[x].className=”close”;

 

}

}

 

要使火狐也能实现这个效果：还得加个东西

table ul{

padding:0px;

}

 

 

 

二、创建表格：

列如：在页面中创建一个五行五列的表格

1）事件源。比如按钮

2）表格节点的存放位置

<input type=”button’ value=”创建表格”onclick=”creTable()” name=”crtBut”/>

写个CSS文件，专门用来描述表格的

table.css

table{

border:#8080ff 1px solid;//随便写点东西就行

 

}

 

<style type=”text/css”>

@import url(table.css);

</style>

 

<script type=”text/javascript”>

function creTable()

{

//思路：

1、可以通过之前学过的creteElement创建元素的形式来完成

//创建表格节点

var oTabNode=document.createElement(“table”);

//创建tBody节点

var oTbdNode=document.createElement(“tbody”);

//创建行节点

var oTrNdoe=document.createElement(“tr”);

//创建单元格节点

var oTdNode=document.createElement(“td”);

oTdNoe.innerHTML=”只是单元格”；

//现在这些节点之间还没有关系，要让这些节点之间有关系，需进行指定层次的节点添加

oTrNode.appendChild(oTdNode);

oTbdNode.appendChild(oTrNode);

oTabNode.appendChild(OTbdNode);

//由于是将table放到div节点里面，所以先获取div节点

document.getElementsByTagName(“div”)[0].appendChild(oTabNode);

 

}

</script>

 

//上面的方法过于繁琐，既然操作的是表格，那么最方便的方式就是使用表格节点对象的方法来完成，表格由行组成，表格节点对象中insertRow方法就完成了创建行并添加的动作

然后通过tr节点对象的insertCell来完成

function crtTable()

{

var tTabNode=document.createElement(“table”);

tTabNode.id=”tabid”;

//或者tTabNode.setAttribute(“id”,”tabid”);

for(var x=1;x<=5;x++)

{

var oTrNode=tTabNode.insertRow();

for(var y=1;y<=6;y++)

{

var oTdNdoe=oTrNode.insertCell();

oTdNode.innerHTML=”这是新的单元格”；

}

}

document.getElementsByTagName(“div”)[0].appendChild(oTabNode);

//为了使这个表格只能创建一次，所以按钮点击一次之后就让他不可用

document.getElementsByName(“crtBut”)[0].disabled=true;

 

}

 

 

 

现在就要动态创建了，弄个文本框，让用户自己选择要创建的表格的行数和列数

弄两个文本框

行：<input type=”text” name=”rownum”/>

列：<input type=”text” name=”colnum”/>

 

 

var rowVal=parseInt(document.getElementsByName(“rownum”)[0].value);

var colVal=parseInt(document.getElementsByName(“colnum”)[0].value);

 

现在想要动态删除指定的行或者列

创建两个文本框，输入要删除的行数和列数

<input type=”text” name=”delrow”/><input type=”button” value=”删除行” onclick=”delRow()”/>

<input  type=”text” name=”delcol”/><input type=”button” value=”删除列” onclick=”delCol()”/>

 

function delRow()

{

//先获取表格对象

var oTabNode=documnet.getElementById(“tabid”);

if(!oTabNode)//非空

{

//获取要删除的表格的行数

var rowVal=document.getElementByName(“delrow”)[0].value;

if（rowVal>=1&&rowVal<=oTabNode.rows.length）

{

tTabNode.deleteRow(rowVal-1);//注意角标减一

}

else

{

alert(“要删除的行不存在”)；

}

 

}

else

{

alert(“表格不存在”);

return;

}

}

 

//删除列，其实就是删除每一行中同一位置的单元格

function delCol()

{

Var oTabNode=document.getElementById(“tabid”);

if(oTabNode==null)

{

alert(“表格不存在”)；

return；

}

var colVal=document.getElementsByName(“delcol”)[0].value;

if(colVal>=1&&colVal<=tTabNode.rows[0].cells.length)

{

for(val  x=0;x<oTabNode.rows.length;x++)

{

oTabNode.rows[x].deleteCell(colVal-1);

}

}

else

{

alert(“要删除的列不存在”)；

}

}