在js中动态打印表格

最新推荐文章于 2024-06-06 11:23:53 发布

iteye_4796

最新推荐文章于 2024-06-06 11:23:53 发布

阅读量564

点赞数

分类专栏： JSP 文章标签： JavaScript XHTML CSS HTML ViewUI

JSP 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

下面这个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>&nbsp;</p>
<p><div align="center" id="listDiv"></div>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

iteye_4796

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在js中动态打印表格

下面这个html可以在js中动态操作表格 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtm...
复制链接

扫一扫