下面这个html可以在js中动态操作表格
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>生成表格</title>
<style type="text/css">
<!--
.STYLE1 {
font-size: large;
font-weight: bold;
}
.td1 {
padding: 5px 0;
background-color: #DEE6FC;
line-height: 25px;
}
.td2 {
padding: 5px;
background-color: #EFF3FE;
line-height: 25px;
}
.td_over {
padding: 5px;
background-color: #fff;
line-height: 25px;
color: #203b8e;
}
.th_title {
text-align: center;
background-color: #fff;
font-size: 12px;
line-height: 13px;
font-weight: bold;
}
-->
</style>
<script language="JavaScript">
var size = 10;
var tradeRecordList = new Array(size);
//初始化打印表格的数据
function initList(){
for(index = 0; index<size;index++){
var obj = new Array();
obj.name = "name"+index;
obj.price= index;
obj.content = "时间"+index;
tradeRecordList[index] = obj;
//document.getElementById("testDiv").innerHTML += "初始化"+ tradeRecordList[index].name+"="+tradeRecordList[index].price;
}
}
//打印表格
function printList(){
initList();
//listDiv表示要加入的页面的位置
var listDivObj = document.getElementById("listDiv");
var tab=document.createElement("table");
//设置table样式
tab.width="100%";
//打印表头
var tr=tab.insertRow();
tr.οnmοuseοver=function(){this.className='th_title' };
tr.οnmοuseοut=function(){ this.className='th_title' };
var td= tr.insertCell(0);
td.innerHTML="序号"
var td= tr.insertCell(1);
td.innerHTML="商品";
var td= tr.insertCell(2);
td.innerHTML="售价";
var td= tr.insertCell(3);
td.innerText = "描述";
//循环打印列表记录
for(var i=0;i<tradeRecordList.length;i++){
var tr=tab.insertRow();
//设置tr样式
if(i%2){//奇数行
tr.className="td2";
tr.οnmοuseοver=function(){this.className='td_over' };
tr.οnmοuseοut=function(){ this.className='td2' };
}else{//偶数行
tr.className="td1";
tr.οnmοuseοver=function(){this.className='td_over' };
tr.οnmοuseοut=function(){ this.className='td1' };
}
var td= tr.insertCell(0);
td.innerHTML=i+1;
var td= tr.insertCell(1);
td.innerHTML=tradeRecordList[i].name;
var td= tr.insertCell(2);
td.innerHTML=tradeRecordList[i].price+"元";
var td= tr.insertCell(3);
td.innerHTML=tradeRecordList[i].content;
}
document.getElementById("listDiv").appendChild(tab);
}
</script>
</head>
<body>
<p align="center" class="STYLE1">打印表格</p>
<p align="center">
<input type="button" name="creat" value="按钮" οnclick="printList()" />
<div align="center" id="testDiv"></div> </p>
<p><div align="center" id="listDiv"></div> </p>
<p> </p>
</body>
</html>