Dom编程练习程序1117.docx

********************************************************************

程序十三、

实现级联菜单的选择，当选择某个省时，会自动列出所包含的区域：

如下图

//www.w3.org/1999/xhtml">********************************

functionselCity（）

{

vararr=[["--选择城市--"],["海淀区","朝阳区","东城区","西城区","昌平区"],

["沈阳","大连","鞍山","抚顺"],["济南","青岛","烟台","威海",

"济宁"],["洛阳","郑州","安阳","南阳","开封"]]

varindex=byId（"selid"）.selectedIndex;

//alert（byId（"selid"）.options[index].innerText）;

varsubselNode=byId（"subselid"）;

varcitys=arr[index];

/*方法一：

清空上一次选择身份后的现实内容，注意：

角标自增、长度自减的情况

for（varx=0;x

{

//alert（x+"....."+subselNode.options[x].innerText+"..."+subselNode.options.length）;

subselNode.removeChild（subselNode.options[x]）;

}

*/

//方法二：

直接将subselNode.options.length=0;

subselNode.options.length=0;

for（varx=0;x

{

varoptNode=doc.createElement（"option"）;

optNode.innerText=citys[x];

subselNode.appendChild（optNode）;

}

}

--选择省市--

北京

辽宁

山东

河南

--选择城市--

********************************************************************

程序十四、

实现如下图所示：

用户通过单击“添加附件”按钮实现附件的添加，可添加多个，然后可通过后面的“删除附件”按钮将不需要的附件删除。

//www.w3.org/1999/xhtml">********************************

tabletda:

link,tabletda:

visited{

text-decoration:

none;

color:

#000066;

}

table{

border:

#0000661pxsolid;

}

varcount=1;

functionaddFile（）

{

vartabNode=byTag（"table"）[0];

vartrNode=tabNode.insertRow（）;

trNode.id="tr_"+count;

vartdNode_file=trNode.insertCell（）;

vartdNode_del=trNode.insertCell（）;

tdNode_file.innerHTML="";

tdNode_del.innerHTML="

void（0）'onclick='delfile（"+count+"）'>删除"+count+"附件";

count++;

}

functiondelfile（num）

{

vartrNode=byId（"tr_"+num）;

/*删除动作,可以合并成一句

vartabNode=byTag（"table"）[0];

vartbdNode=tabNode.childNodes[0];

tbdNode.removeChild（trNode）;

*/

trNode.parentNode.removeChild（trNode）;

}

functiondelfiel_1（node）

{

vartrNode=node.parentNode.parentNode;

trNode.parentNode.removeChild（trNode）;

}

*******************************************************************

程序十五

实现如下图所示功能：

包含三个全选、一个取消选择、一个反选、一个删除所选邮件

//www.w3.org/1999/xhtml">********************************

table{

border:

#0000FF1pxsolid;

width:

70%;

}

tabletd,tableth{

border:

#0099FF1pxsolid;

}

tableth{

background-color:

#006600;

}

.one{

background-color:

#FFFF99;

}

.two{

background-color:

#33FFFF;

}

.over{

background-color:

#006699;

}

//行颜色间隔显示并高亮

varname;

functiontrColor（）

{

vartabNode=document.getElementsByTagName（"table"）[0];

vartrs=tabNode.rows;

for（varx=1;x

{

if（x%2==1）

{

trs[x].className="one";

}

else

trs[x].className="two";

trs[x].onmouseover=function（）

{

name=this.className;

this.className="over";

}

trs[x].onmouseout=function（）

{

this.className=name;

}

}

}

window.onload=function（）

{

trColor（）;

}

//完成checkbox的全选动作

functioncheckAll（index）

{

varallNode=document.getElementsByName（"all"）[index];

varmails=document.getElementsByName（"mail"）;

for（varx=0;x

{

mails[x].checked=allNode.checked;

}

}

//完成按钮的选取。

functioncheckByBut（num）

{

varmails=document.getElementsByName（"mail"）;

for（varx=0;x

{

if（num>1）

mails[x].checked=!

mails[x].checked;

else

mails[x].checked=num;

}

}

//删除所选邮件

functiondelMail（）

{

if（!

window.confirm（"你真的要删除所选邮件吗？

"））

return;

varmails=document.getElementsByName（"mail"）;

vararr=newArray（）;

varpos=0;

for（varx=0;x

{

if（mails[x].checked）

{

vartrNode=mails[x].parentNode.parentNode;

//trNode.parentNode.removeChild（trNode）;

arr[pos++]=trNode;

}

}

for（varx=0;x

{

vartrNode=arr[x];

trNode.parentNode.removeChild（trNode）;

}

trColor（）;

}

（1）"/>

（2）"/>

********************************************************************

程序十六、

实现如下图所示功能：

用户名要求5个小写字母，密码要求5个数字，邮箱格式”smhjx2006@”

//www.w3.org/1999/xhtml">********************************

#useryes,#userno{

display:

none;

}

/*

functioncheckUser（userNode）

{

varname=userNode.value;

varnamereg=newRegExp（"^[a-z]{5}$"）;

varspanNode=byId（"userspan"）;

if（name.match（namereg））

{

//spanNode.innerHTML="用户名正确".fontcolor（"green"）;

}

else

{

//spanNode.innerHTML="错误的用户名".fontcolor（"red"）;

}

}

*/

functioncheckUser（userNode）

{

varname=userNode.value;

varnamereg=/^[a-z]{5}$/i;//加上参数i表示忽略大小写

//varnamereg=newRegExp（"^[a-z]{5}$"）;

varspanNode1=byId（"useryes"）;

varspanNode2=byId（"userno"）;

if（name.match（namereg））

{

spanNode1.style.display="inline";

spanNode1.style.color="green";

spanNode2.style.display="none";

}

else

{

spanNode2.style.display="inline";

spanNode2.style.color="red";

spanNode1.style.display="n