< 笔记 > DOM - 03 DOM 示例
03 DOM 示例
By Kevin Song
03-01 示例一：字体大中小改变
03-02 示例二：展开闭合列表
03-03 示例三：好友列表
03-04 示例四：创建表格
03-05 示例五：行颜色间隔显示并高亮
03-06 示例六：全选商品
03-07 示例七：邮件系统
03-08 示例八：单选按钮
03-09 示例九：下拉菜单
03-10 示例十：附件
03-01 示例一：字体大中小改变
方法一：给标签节点对象设置font，color等属性
思路
- 标签封装数据（HTML）
- 定义页面样式（CSS）
- 确定事件源，事件，处理方式中被处理的节点（DOM）
- 事件源 标签
- 要给超链接加入自定义的事件处理，要先取消超链接的默认点击效果：href=”javascript:void(0)”
- 事件 onclick
- 被处理的节点
-newstext
- 事件源 标签
- 处理方式（JS）
<html>
<head>
<title>Kevin's Homepagetitle>
<style type="text/css">
a:link, a:visited {//设置访问前访问后超链接格式
color:#0000ff;//字体颜色
text-decoration:none;//取消下划线
}
a:hover {//设置鼠标悬停格式
color:#ff8800;
}
#newstext {
width:500px;
}
style>
head>
<body>
<script type="text/javascript">
//定义改变字体的方法
function changeFont(size) {
//获取div节点对象
var oNewsText = document.getElementById("newstext");
//获取oNewText节点对象的style属性
oNewText.style.fontSize = size+"px";
}
script>
<h1>标题h1>
<a href="javascript:void(0)" onclick="changeFont(28)">大字体a>
<a href="javascript:void(0)" onclick="changeFont(16)">中字体a>
<a href="javascript:void(0)" onclick="changeFont(8)">小字体a>
<div id="newstext">
The Congress meets in the Capitol in Washington, D.C.
Both senators and representatives are chosen through
direct election, though vacancies in the Senate may be
filled by a gubernatorial appointment. Congress has 535
voting members: 435 Representatives and 100 Senators.
div>
body>
html>方式二：给标签节点对象设置class属性
方式一缺点
- 传参过多，阅读性差
- JS代码和CSS代码耦合性高
- 不利于扩展
解决方式：把多个所需的样式封装到类选择器中，给指定的标签节点对象加载不同的类即可
<html>
<head>
<title>Kevin's Homepagetitle>
<style type="text/css">
a:link, a:visited {//设置访问前访问后超链接格式
color:#0000ff;//字体颜色
text-decoration:none;//取消下划线
}
a:hover {//设置鼠标悬停格式
color:#ff8800;
}
#newstext {
width:500px;
}
//把样式封装到选择器中：类选择器
.norm {
color:#00000;
font-size:16px;
background-color:#CDD8D0
}
.max {
color:#00000;
font-size:24px;
background-color:#CDD8D0
}
.min {
color:#00000;
font-size:12px;
background-color:#CDD8D0
}
style>
head>
<body>
<script type="text/javascript">
//把格式封装到选择器中
function changeFont(selectorName) {
//获取div节点对象
var oNewsText = document.getElementById("newstext");
oNewsText.className = selectorName;
}
script>
<h1>标题h1>
<a href="javascript:void(28)" onclick="changeFont('max')">大字体a>
<a href="javascript:void(16)" onclick="changeFont('norm')">中字体a>
<a href="javascript:void(8)" onclick="changeFont('min')">小字体a>
<div id="newstext" class="norm">
The Congress meets in the Capitol in Washington, D.C.
Both senators and representatives are chosen through
direct election, though vacancies in the Senate may be
filled by a gubernatorial appointment. Congress has 535
voting members: 435 Representatives and 100 Senators.
div>
body>
html>03-02 示例二：展开闭合列表
思路
- 标签封装数据 HTML
- 定义页面样式 CSS
- 明确事件源，时间，要处理的节点 DOM
- 明确具体操作方式 JS
方式一：给标签节点对象设置overflow属性
<html>
<head>
<title>Kevin's Homepagetitle>
<style type="text/css">
dl dd {
margin:0px;
}
dl {
height:16px;
overflow:hidden;//只保留16px的内容
}
style>
head>
<body>
<script type="text/javascript">
var flag = true;
//列表展开闭合效果
function list() {
var oDlNode = document.getElementByTag("dl"[0]);
if(flag) {
oDlNode.style.overflow = "visible";
flag = false;
}else{
oDlNode.style.overflow = "hidden";
flag = true;
}
}
script>
<dl>
<dt onclick="list()">显示头目一dt>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
dl>
body>
html>方式二：给标签节点对象设置class属性
方式一缺点
- 传参过多，阅读性差
- JS代码和CSS代码耦合性高
- 不利于扩展
解决方式：把多个所需的样式封装到类选择器中，给指定的标签节点对象加载不同的类即可
<html>
<head>
<title>Kevin's Homepagetitle>
<style type="text/css">
dl dd {
margin:0px;
}
dl {
height:16px;
overflow:hidden;//只保留16px的内容
}
//预定义类选择器
.open {
overflow:visible;
}
.close {
overflow:hidden;
}
style>
head>
<body>
<script type="text/javascript">
var flag = true;
//列表展开闭合效果
function list(node) {
//获取dl节点
var oDlNode = node.parentNode;
//var oDlNode = document.getElementByTag("dl"[index]);
//展开比和切换方式一 flag
/*
if(flag) {
oDlNode.className = "open";
flag = false;
}else{
oDlNode.className = "close";
flag = true;
}
*/
//展开闭合切换二
if(oDlNode.className == "close") {
oDlNode.className = "open";
}else{
oDlNode.className = "close";
}
}
//一个节点打开，其他节点自动关闭
function listOne(node) {
//获取dl节点
var oDlNode = node.parentNode;
//获取所有dl节点
var collDlNodes = document.getElementByTag("dl");
for (var x = 0; x < collDlNodes.length; x++) {
if (oDlNode == collDlNodes[x]) {
if(oDlNode.className == "close") {
oDlNode.className = "open";
}else{
oDlNode.className = "close";
}
} else {
collDlNodes[x].className = "close";
}
}
}
script>
<dl class="close">
<dt onclick="list(this)">显示头目一dt>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
dl>
<dl class="close">
<dt onclick="list(this)">显示头目一dt>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
dl>
<dl class="close">
<dt onclick="list(this)">显示头目一dt>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
dl>
body>
html>03-03 示例三：好友列表
<html>
<head>
<title>Kevin's Homepagetitle>
<style type="text/css">
table ul { //表格中的ul样式定义
list-style:none;//取消无序列表样式
margin:0px;//取消外边距
display:none;//不显示
}
table {
border:#0000ff 1px splid;
width:80px;
}
table td {
border:#0000ff 1px solid;
}
table td a:link, table td a:visited {//超链接格式设置
color:#FF0000;
text-decoration:none;
}
.open {
display:block;
}
.close {
display:open;
}
style>
head>
<body>
<script type="text/javascript">
function list(node) {
//获取被操作的节点ul
var oTdNode = node.parentNode
var oUlNode = oTdNode.getElementsByTagName("ul")[0];
//获取所有的ul
var oTabNode = document.getElementById("goodlist");
var collUlNodes = oTabNode.getElementsByTagName("ul");
for(var x=0; xif (collUlNodes[x]==oUlNode){
if(oUlNode.className == "open"){
oUlNode.className = "close";
}else{
oUlNode.className = "open";
}
}else{
collUlNodes[x].className = "close";
}
}
}
script>
<table id="goodlist">
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单a>
<ul>
<li>一个好友li>
<li>一个好友li>
<li>一个好友li>
ul>
td>
tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单a>
<ul>
<li>一个好友li>
<li>一个好友li>
<li>一个好友li>
ul>
td>
tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单a>
<ul>
<li>一个好友li>
<li>一个好友li>
<li>一个好友li>
ul>
td>
tr>
table>
body>
html>03-04 示例四：创建表格
table.css文件
table思路
- 事件源：一个按钮
- 必须有一个生成的表格节点存储位置
方法一
<html>
<head>
<title>Kevin's Homepagetitle>
<style type="text/css">
@import url(table.css);
style>
head>
<body>
<script type="text/javascript">
function creTable() {
//创建表格节点
var oTabNode = document.createElement("table");
//创建TBody节点
var oTbdNode = document.createElement("tbody");
//创建行节点
var oTrNode = document.createElement("tr");
//创建单元格节点
var oTdNode = document.createElement("td");
oTdNode.innerHTML = "这是一个单元格";
//连接四个节点
oTrNode.appendNode(oTdNode);
oTbdNode.appendNode(oTrNode);
oTabNode.appendNode(oTbdNode);
document.getElementsByTagName("div")[0].appendChild(oTabNode);
}
script>
<input type="button" value="创建表格" onclick="creTable()" />
<hr />
<div>div>
body>
html>方法二
用表格节点对象的方法来实现
table对象常用方法
- insertRow() 插入行
- insertCell() 插入单元格
<html>
<head>
<title>Kevin's Homepagetitle>
<style type="text/css">
@import url(table.css);
style>
head>
<body>
<script type="text/javascript">
function creTable() {
//创建表格节点
var oTabNode = document.createElement("table");
//oTabNode.id = "tabid";
oTabNode.setAttribute("id","tabid");
var rowVal = parseInt(document.getElementsByName("rownum")[0].value);
var colVal = parseInt(document.getElementsByName("colnum")[0].value);
for(var x = 1; x <= rowVal; x++) {
var oTrNode = oTabNode.insertRow();//插入行
for(var y = 1; y <= colVal; y++) {
var oTdNode = oTrNode.insertCell();//插入单元格
oTdNode.innerHTML = x+"--"+y;
}
}
document.getElementsByTagName("div")[0].appendChild(oTabNode);
//只能创建一次
document.getElementsByName("crtbut")[0].disabled = true;
//删除行
function delRow() {
//获取表格对象
var oTabNode = document.getElementById("tabid");
if(oTabNode==null) {
alert("表格不存在");
return；
}
//获取要删除的表格行数
var rowVal = document.getElementsByName("delrow")[0].value;
if (rowVal>=1 && rowVal <= oTabNode.rows.length) {
oTabNode.deleteRow(rowVal-1);
} else {
alert("要删除的行不存在");
}
}
//删除列：删除每一行同一位置的单元格
function delCol() {
//获取表格
var oTabNode = document.getElementById("tabid");
//判断表格是否存在
if(oTabNode==null) {
alert("表格不存在");
return；
}
var colVal = document.getElementsByName("delcol")[0].value;
if (colVal>=1 && colVal <= oTabNode.rows[0].cells.length) {
for (var x = 0; x < oTabNode.rows.length; x++) {
oTabNode.wors[x].deleteCell(colVal-1);
}
} else {
alert("要删除的列不存在");
}
}
}
script>
<input type="text" name="rownum" />行数
<input type="text" name="colnum" />列数
<input type="button" value="创建表格" name="crtbut" onclick="creTable()" />
<input type="text" name="delrow" />
<input type="button" value="删除行" onclick="delRow()" />
<input type="text" name="delcol" />
<input type="button" value="删除列" onclick="delCol()" />
<hr />
<div>div>
body>
html>03-05 示例五：行颜色间隔显示并高亮
“`
Kevin’s Homepage
.one {
background-color:#AEEEEE;
}
.two {
background-color:#EEEE00;
}
.over {
background-color:#8deffa
}
function trColor() {
var oTabNode = document.getElementById("info");
var collTrNodes = oTabNode.rows;
for (var x = 1; x < collTrNodes.length; x++) {
if(x%2==1) {
collTrNodes[x].className = "one";
} else {
collTrNodes[x].className = "two";
}
//给每一个行对象添加两个事件
collTrNodes[x].onmouseover = function() {
name = this.className;
this.className ="over";
}
collTrNodes[x].onmouseout = function() {
this.className = name;
}
}
}
onload = function() {
trcolor();
}
/*
var name;
function over(node) {
var name = node.className;
node.className = "over";
}
function outa(node) {
node.className = name;
}
*/
| Name | Age | Address |
|---|---|---|
| Steve | 29 | LA |
| Tony | 31 | NY |
| Seb | 28 | RU |
表格排序
思路：
- 需要数组存储需要参与排序的行对象
- 对行数组中的每一个行的年龄单元格数据比较，并再数组中置换
- 把排序后的数组重新添加回表格
```
<html>
<head>
<title>Kevin's Homepagetitle>
<style type="text/css">
th a:link, th a:visited {
color:#279bda;
text-decoration:none;
}
style>
<script type="text/javascript">
function sortTable() {
var oTabNode = document。getElementById("info");
var collTrNodes = oTabNode.rows;
//定义一个临时容器，存储需要排序的行对象
var trArr = [];
//遍历原行集合，并将需要排序的行对象存储到数组中
for (var x = 1; x < collTrNodes.length; x++) {
trArr[x-1] =collTrNodes[x];
}
//对临时容器排序
mySort(trArr);
//把排完序的行对象添加回表格
for(var x = 0; x < trArr.length; x++) {
trArr[x].parentNode.appendChile(trArr[x]);
}
}
function mySort(arr) {
for(var x = 0; x < arr.length-1; x++) {
for(var y = x+1; y < arr.length; y++) {
if(arr[x].cells[1].innerHTML > arr[y].cell[1].innerHTML) {
arr[x].swapNode(arr[y]);
}
}
}
}
script>
head>
<body>
<table id="info">
<tr>
<th>Nameth>
<th><a href="javascript:void(0) onclick="sortTable()">Agea>th>
<th>Addressth>
tr>
<tr>
<td>Stevetd>
<td>29td>
<td>LAtd>
tr>
<tr>
<td>Tonytd>
<td>31td>
<td>NYtd>
tr>
<tr>
<td>Sebtd>
<td>28td>
<td>RUtd>
tr>
table>
body>
html>03-06 示例六：全选商品
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Documenttitle>
head>
<body>
<script type="text/javascript">
function getSum(){
/*
* 获取所有的名称为item的复选框。
* 判断checked状态，为true表示被选中，获取该节点的value进行累加。
*/
var sum = 0;
var collItemNodes = document.getElementsByName("item");
for(var x=0; xif (collItemNodes[x].checked){
sum += parseInt(collItemNodes[x].value);
}
}
var sSum = sum+"元";
document.getElementById("sumid").innerHTML = sSum.fontcolor('red');
}
//全选。
function checkAll(node){
/*
* 将全选的box的checked状态赋值给所有的itembox的checked。
*/
var collItemNodes = document.getElementsByName("item");
for(var x=0; xscript>
<input type="checkbox" name="allitem" onclick="checkAll(this)" />全选<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
<input type="checkbox" name="allitem" onclick="checkAll(this)" />全选<br/>
<input type="button" value="总金额是" onclick="getSum()"/><span id="sumid">span>
body>
html>
03-07 示例七：邮件系统
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Documenttitle>
<link rel="stylesheet" type="text/css" href="table.css"/>
<style type="text/css">
.one{
background-color:#9bf7d5;
}
.two{
background-color:#f3e99a;
}
.over{
background-color:#ef7125;
}
style>
<script type="text/javascript">
//行颜色间隔显示
var name;
function trColor(){
//1,获取表格对象
var oTabNode = document.getElementById("mailtable");
//2,获取行对象
var collTrNodes = oTabNode.rows;
//3,对所有需要设置背景的行对象进行遍历
for(var x=1; x1 ;x++){
if(x%2==1){
collTrNodes[x].className = "one";
}else{
collTrNodes[x].className = "two";
}
collTrNodes[x].onmouseover = function(){
name = this.className;
this.className = "over";
}
collTrNodes[x].onmouseout = function(){
this.className = name;
}
}
}
onload = function(){
trColor();
}
//复选框的全选动作
function checkAll(node){
//获取所有的mail复选框
var collMailNodes = document.getElementsByName("mail");
for(var x=0; x//定义用按钮完成复选的方法
function checkAllByBut(num){
var collMailNodes = document.getElementsByName("mail");
for(var x=0; xif(num>1)
collMailNodes[x].checked = !collMailNodes[x].checked;
else
collMailNodes[x].checked = num;
}
}
//删除所选邮件
function deleteMail(){
if (!confirm("Really want to delete?"))
return;
}
//获取所有mail节点
var collMailNodes = document.getElementsByName("mail");
for (var x = 0; x < collMailNodes.length; x++) {
if (collMailNodes[x].checked) {
var oTrNode = collMailNodes[x].parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
x--;
}
}
trColor();
}
script>
head>
<body>
<table id="mailtable">
<tr>
<th>
<input type="checkbox" name="all" onclick="checkAll(this)" />All
th>
<th>
Sender
th>
<th>
E-mail Name
th>
<th>
Description
th>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
123
td>
<td>
345
td>
<td>
567
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
789
td>
<td>
901
td>
<td>
123
td>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
345
td>
<td>
567
td>
<td>
789
td>
tr>
<tr>
<th>
<input type="checkbox" name="all" onclick="checkAll(this)" />All
th>
<th colspan="3">
<input type="button" value="All" onclick="checkAllByBut(1)" />
<input type="button" value="Cancel All" onclick="checkAllByBut(0)" />
<input type="button" value="Reverse All" onclick="checkAllByBut(2)" />
<input type="button" value="Deleted Selected" onclick="deleteMail()" />
th>
tr>
table>
body>
html> 03-08 示例八：单选按钮
单选按钮演示：
- 调查问卷
- 性格测试
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Documenttitle>
<style type="text/css">
#contentid{
display:none;
}
#no1ul{
list-style:none;
margin:0px;
}
.close{
display:none;
}
.open{
display:block;
}
style>
<script type="text/javascript">
function showResult(){
//1,判断是否有答案被选中
//判断所有no1的radio，判断checked状态
var oNo1Nodes = document.getElementsByName("no1");
var flag = false;
var val;
for(var x=0; xif (oNo1Nodes[x].checked){
flag = true;
val = oNo1Nodes[x].value;
break;
}
}
if(!flag){
// alert("")
document.getElementById("errinfo").innerHTML = "还没选择答案".fontcolor("red");
return;
}
if(val>=1 && val<=3){
document.getElementById("res_1").className = "open";
document.getElementById("res_2").className = "close";
}
else{
document.getElementById("res_1").className = "close";
document.getElementById("res_2").className = "open";
}
}
script>
head>
<body>
<h2>性格测试h2>
<div>
<h3>第一题h3>
<span>你喜欢什么水果呀span>
<ul id="no1ul">
<li><input type="radio" name="no1" value="1" />葡萄/li>
<li><input type="radio" name="no1" value="2" />西瓜li>
<li><input type="radio" name="no1" value="3" />芒果li>
<li><input type="radio" name="no1" value="4" />苹果li>
<li><input type="radio" name="no1" value="5" />樱桃li>
ul>
div>
<div>
<input type="button" value="查看测试结果" onclick="showResult()" />
<span id="errinfo">span>
<div id="res_1" class="close">1-3分结果..div>
<div id="res_2" class="close">4分结果...div>
div>
<hr/>
<script type="text/javascript">
function showContent(node){
var oDivNode = document.getElementById("contentid");
with(oDivNode.style){
if(node.value=='yes'){
display = "block";
}else{
display = "none";
}
}
}
script>
<div>
您要参加问卷调查吗
<input type="radio" name="wenjuan" value="yes" onclick="showContent(this)" />是
<input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)" />否
div>
<div id="contentid">
问卷调查内容<BR/>
您的姓名<input type="text" /><br>
您的邮箱<input type="text" />
div>
body>
html>03-09 示例九：下拉菜单
选择颜色
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Documenttitle>
<style tyle="text/css">
.clrclass{
height:50px;
width:50px;
float:left;
margin-right:30px;
}
#text{
clear:left;
margin-top:20px;
}
.selClass{
width:100px;
}
style>
head>
<body>
<script type="text/javascript">
function changeColor(node){
var colorVal = node.style.backgroundColor;
document.getElementById("text").style.color = colorVal;
}
script>
<div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)">div>
<div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)">div>
<div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)">div>
<div id="text">
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
div>
<hr/>
<script type="text/javascript">
function changeColor2(){
var oSelectNode = document.getElementsByName("selectColor")[0];
//获取所有的option
/*with (oSelectNode) {
var collOptionNodes = options;
alert(options[selectedIndex].innerHTML);
}*/
var colorVal = oSelectNode.options[oSelectNode.selectedIndex].value;
document.getElementById("text").style.color = colorVal;
// for(var x=0;x
// alert(collOptionNodes[x].innerHTML);
// }
}
script>
<select name="selectColor" onchange="changeColor2()">
<option value="black">选择颜色option>
<option value="red">红色option>
<option value="green">绿色option>
<option value="blue">蓝色option>
select>
<select name="selectColor2" onchange="changeColor3()" class="selClass">
<option style="background-color:black" value="black">选择颜色option>
<option style="background-color:red" value="red">红色option>
<option style="background-color:green" value="green">绿色option>
<option style="background-color:blue" value="blue">蓝色option>
select>
body>
html>选择城市
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Documenttitle>
<style type="text/css">
select{
width:100px;
}
style>
head>
<body>
<script type="text/javascript">
function selectCity(){
var collCities = [['选择城市'],['盐城','南京','徐州','无锡'],
['武汉','黄冈'],
['济南','青岛','烟台']];
// var arr = {"jiangsu":['盐城','南京','徐州','无锡']};
//获取两个下拉菜单对象
var oSelNode = document.getElementById("selid");
var oSubSelNode = document.getElementById("subselid");
//获取选择的省得角标
var index = oSelNode.selectedIndex;
//通过角标获取对应城市数组
var arrCities = collCities[index];
//把子菜单中的内容清空一下
// for(var x=0;x
// oSubSelNode.removeChild(oSubSelNode.options[x]);
// }
//清除动作
oSubSelNode.length = 0;
//遍历数组，吧数组的元素封装成option对象，添加到子菜单中
for(var x=0; xvar oOptNode = document.createElement("option");
oOptNode.innerHTML = arrCities[x];
oSubSelNode.appendChild(oOptNode);
}
}
script>
<select id="selid" onchange="selectCity()">
<option>选择省市option>
<option value="jiangsu">江苏option>
<option>湖北option>
<option>山东option>
select>
<select id="subselid">
<option>选择城市option>
select>
body>
html>03-10 示例十：附件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Documenttitle>
<style type="text/css">
table a:link,table a:visited{
color:#179ed9;
text-decoration:none;
}
table a:hover{
color:#f36021;
}
style>
<script type="text/javascript">
function addFile(){
//获取表格节点对象
var oTabNode = document.getElementById("fileid");
//创建行
var oTrNode = oTabNode.insertRow();
//创建列
var oTdNode_file = oTrNode.insertCell();
var oTdNode_del = oTrNode.insertCell();
//第一个单元格放文件提交表单
oTdNode_file.innerHTML = "";
//第二个单元格放删除按钮
// oTdNode_del.innerHTML = "删除附件";
oTdNode_del.innerHTML = "
";
}
function deleteFile(node){
var oTrNode = node.parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
}
script>
head>
<body>
<table id="fileid">
<tr>
<td><a href="javascript:void(0)" onclick="addFile()">添加文件a>td>
tr>
table>
body>
html>