（源创）javaScript结合DOM技术使用
本例做一个简单的动态加载TABLE表。（1）JS部分：
// JavaScript Document
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ cTable.html
//创建表的列
var createCell=function(cellText)
{
var cell=cTag("td");
var cellNode=cTagNode(cellText);
cell.appendChild(cellNode);
//cell.setAttribute("className","myTabletr");
//返回一个创建成功的列
return cell;
}
//创建表的行
var createRow=function(rowID,rowClass,rowClassOver,cellTexts)
{
var row=cTag("tr");
row.id=rowID;
row.setAttribute("className",rowClass);
var i=0;
//循环创建完所有的列
while(i<cellTexts.length)
{
row.appendChild(createCell(cellTexts[i]));
i++;
}
var cell=cTag("td");
var cText="<a href='javascript:void(0)' onClick=\"del('"+rowID+"')\">删除</a>";
//alert(cText)
cell.innerHTML=cText;
row.appendChild(cell);
//鼠标事件
row.onmouseover=function(){ row.className=rowClassOver;}
row.onmouseout=function(){ row.className=rowClass;}
//返回一个创建成功的行
return row;
}
//删除行
var del=function(obj)
{
//表的行删除方法基本归纳三种方式
//（1）
//从tt_1开始查找删除方法 子节点obj
$("tt_1").removeChild($(obj));
//（2）从表开始查找。删除法
//$("t1").childNodes("tt_1").removeChild($(obj));
//（3）
//alert($("t1").childNodes("tt_1").childNodes(obj).id);
//或直接使用操作表的函数deleteRow进行删除
//alert(obj.parentElement.parentElement.rowIndex);
//$("t1").deleteRow(obj.parentElement.parentElement.rowIndex);
}
//动态创建一个表
var createTable=function(tableID,tBodyID,tableClass,text)
{
var div=$("d");
var table=cTag("table");
var tBody=cTag("tbody");
var row;
//
for(i=0;i<text.length;i++)
{
row=createRow("myrowID_"+i,"myTabletr","myTabletrOver",text[i]);
tBody.appendChild(row);
}
tBody.id=tBodyID;
table.id=tableID;
table.setAttribute("className",tableClass);
table.setAttribute("border","0");
table.setAttribute("width","100%");
//
table.appendChild(tBody);
div.appendChild(table);
}
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 公用方法
//创建节点的文本
var cTagNode=function(tagText)
{
return document.createTextNode(tagText);
}
//创建节点
var cTag =function(objTag)
{
return document.createElement(objTag);
}
//获得元素
var $=function(id)
{
return document.getElementById(id);
}
（2）CSS样式部分：
/* CSS Document */
.myTabletr {
font-size: 12px;
line-height: 19px;
background-color: #FAFAFA;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: dotted;
border-left-style: none;
border-bottom-color: #333333;
cursor: hand;
}
.myTable {
border: 1px solid #999999;
}
.myTabletrOver {
font-size: 12px;
line-height: 19px;
background-color: #FFFF00;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: dotted;
border-left-style: none;
border-bottom-color: #333333;
cursor: hand;
color: #0000FF;
}
（3）HTML部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="jscript" type="text/javascript" src="javaScript/js.js"></script>
<script language="jscript">
//创建多条信息（该部分往往结合JSP或ASP等服务器端程序生成JS）
var text=
[
["莫小明","男","23岁","重庆交通大学毕业","详细>>"],
["张亮","男","33岁","重庆大学毕业","详细>>"],
["李研","女","22岁","重庆交通大学计算机与信息学院毕业","详细>>"],
["李研","女","22岁","重庆交通大学计算机与信息学院毕业","详细>>"],
["李研","女","22岁","重庆交通大学计算机与信息学院毕业","详细>>"],
["李研","女","22岁","重庆交通大学计算机与信息学院毕业","详细>>"],
["李研","女","22岁","重庆交通大学计算机与信息学院毕业","详细>>"],
["李研","女","22岁","重庆交通大学计算机与信息学院毕业","详细>>"],
["李研","女","22岁","重庆交通大学计算机与信息学院毕业","详细>>"],
["李研","女","22岁","重庆交通大学计算机与信息学院毕业","详细>>"],
["李研","女","22岁","重庆交通大学计算机与信息学院毕业","详细>>"],
["李研","女","22岁","重庆交通大学计算机与信息学院毕业","详细>>"],
["王聪","男","25岁","西南农业大学毕业","详细>>"],
["周双","女","21岁","重庆交通大学毕业","详细>>"]
];
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态创建表</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body onload="createTable('t1','tt_1','myTable',text);">
<div id="d" />
</body>
</html>
页:
[1]