下面这个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.onmouseover=function(){this.className='th_title' };
tr.onmouseout=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.onmouseover=function(){this.className='td_over' };
tr.onmouseout=function(){ this.className='td2' };
}else{//偶数行
tr.className="td1";
tr.onmouseover=function(){this.className='td_over' };
tr.onmouseout=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="按钮" onclick="printList()" />
<div align="center" id="testDiv"></div> </p>
<p><div align="center" id="listDiv"></div> </p>
<p> </p>
</body>
</html>
分享到：
相关推荐
document.write('<table>')
代码如下: <%... charset=UTF-8″ pageEncoding=”UTF-8″%> <!... <HEAD>...javascript打印-打印页面设置-打印预览代码</TITLE> <META http-equiv=Content-Type content=”text/html
该插件可以将Html的表格导出成为 JSON, XML, CSV, TSV, ...在项目上遇到pdf导出中文乱码问题，经过一天的研究修改了一些js代码解决了pdf导出中文乱码问题，随便融入了一个html打印功能的js，有需要的可以下载来看看。
2.内容、图片、表格跨页断裂，封边 3.table并行、并列双边、重边 4.自动计算页码（总数及每一页），样式、位置、形式完全个性化 5.页眉页脚，去除浏览默认，自定义内容、样式、位置 6.保持页脚在页面底部，而非紧接...
js调用word打印，js调用word打印html、js调用word导出表单form、js调用word动态画表格填值
本文实例为大家分享了js实现打印表格的具体代码，供大家参考，具体内容如下 效果如下： 代码如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>打印表格&...
不错的js表报打印控件,试用简单.好用,找了好久,只有上传到空间才能用. 找了很久.基本打印功能都能实现,分页打印.打印预览. google浏览器测试效果不错.
剪切, 粘贴 自动填充插入行, 列 (处理中)删除行, 列 )隐藏行, 列支持多个sheet表打印数据验证导出XLSX导入XLSX导出CVS导入CVS中)导入图片 )数据筛选，高性能 Web JavaScript Canvas 电子表格高性能 Web JavaScript ...
利用js代码实现文档部分打印功能 文档中除了doPrint 函数外 还有其它有用函数
使用js实现打印分页的功能（包括页码，表头，表尾）
js打印,将数据读取到打印页面，用js截取，从而实现打印指定模块！打印的时候如果页面数据过多，打印机可以自动分页打印！我的是hp的打印机，下载的朋友可以试试！注意，本人声明：这个并不是针对于打印分页而写，...
使用JS的Window对象的Print方法实现兼容性强的分页打印功能，可直接运行，代码直接复制即可用。
用JS控制表格的交替颜色
资源包含打印页面及两个所需的js文件，轻量级代码即可实现打印表格数据，方便快捷用于自学和嵌套自己页面中
Javascript导出excel为xlsx格式，兼容IE6+和主流浏览器，下载下来直接可以使用。 其他javascript导出excel插件可看作者文章：https://blog.csdn.net/qq_21693027/article/details/80459677
打印想要的部分
类功能描述：该插件生成一个具有行合并的列表数据，合并例由开发者指定。 开发者提供已排序的数据列表以及需要合并行的列名即可，无需后端二次...详情说明请见 mergerow.js 中的注释说明。 mergerow.html为具体事例。
在各种动态网页开发语言下使用VBScript、JavaScript脚本语言进行各种信息的打印预览工作，可以直接打印HtmlTable网页元素中的文字信息。 在控件演示实例中有本控件的详细说明文件，本控件现在是打印预览控件的测试...
例如在销售表格中，填写单价和数量后，金额和汇总金额以及金额大写可以全部由脚本自动生成。再例如，您可以创建ADO对象来直接获取数据库中的数据，而宿主程序无须编写任何代码，或者可以编写灵活性非常高的代码。...