javascript篇三级动联和经典案例_dt dd 三级-优快云博客

本文链接：https://blog.youkuaiyun.com/wangxueying_123/article/details/71426810

本文通过两个具体示例介绍了使用JavaScript实现网页元素的动态交互。一是展示如何利用数组和选择框创建三级联动效果，二是演示如何通过按钮点击事件动态生成表格结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三级动联

<script type="text/javascript">
function demo(){
var array=[
["选择城市"],
["海淀区","丰台区"],
["浦东区","浦西区"],
["开封","郑州"]
];

var se1Node=document.getElementById("se1");
var se2Node=document.getElementById("se2");

var index=se1Node.selectedIndex;
var arr=array[index];

se2Node.length=1;
for(var x=0;x<arr.length;x++){
var opNode=document.createElement("option");
opNode.innerHTML=arr[x];
opNode.appendChild(opNode);
}

}

三级联动里的数组，与二级中的城市一一对应，二级中有几个城市，三级中就有几个数组。

</script>

<select onChange="demo()" id="se1">
<option>选择省市</option>
<option>北京市</option>
<option>上海市</option>
<option>河南省</option>
</select>
<select id="se2">
<option>选择城市</option>
</select>

案例一：
创建表格

<script type="text/javascript">
var tableNode=document.createElement("table");
var cow=document.getElementsByName("name")[0].value;
for(var x=1;x<4;x++){
var trNode=tableNode.insertRow();
for(var y=1;y<=3;y++){
var tdNode=trNode.insertCell();
}
}
document.getElementsByTagName("div")[0].appendChild(tableNode);
</script>

<input type="button" value="创建表格" name="but" onclick="createTable()"/>
<div></div>

案例二
描述列表
css
dt,dd{
margin=0px;
}
.close{
overflow:hidden;
}

<script type="text/javascript">
var flag=true;
demo(){
var dlNode=document.getElementsByTagName("d1")[0];
if(flag){
dlNode.style.overflow="visible";
flag=false;
}else{
dlNode.style.overflow="hidden";
flag=true;
}

}
</script>

<dl class="close">
<dt>描述列表标签</dt>
<dd>描述列表项</dd>
<dd>描述列表项</dd>
<dd>描述列表项</dd>
<dd>描述列表项</dd>
</dl>