`
dianziermu
  • 浏览: 139717 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

在js中动态打印表格

    博客分类：
  • JSP
JavaScriptXHTMLCSSHTML 
阅读更多

下面这个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>&nbsp;</p>
<p><div align="center" id="listDiv"></div>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
 
分享到：
| Struts 2中实现文件下载（修正中文问题）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    最简单的动态生成表格并实现不同框架打印

    例如，当从服务器获取数据后，可以通过JavaScript的`innerHTML`属性或`appendChild`方法将数据插入到表格中。如果使用了现代前端框架，如Vue.js，你可以定义一个数据模型，表格会自动响应模型的变化，实现数据驱动...

    JS操作Word生成表格

    在IT行业中，JavaScript（简称JS）通常用于网页前端交互，但通过特定的库和API，我们也能使用JS来操作Microsoft Word文档，包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能，以及相关的...

    js 动态表格增 删 查 改

    在JavaScript编程中，动态表格是一种常见的交互式网页元素，它允许用户在运行时添加、删除、检查和修改数据。这种功能对于数据展示和管理尤为重要，特别是在Web应用中处理大量结构化信息时。以下是对"js 动态表格 增...

    jquery打印HTML表格自动分页

    1. **获取表格数据**：通过jQuery选择器（如`$('table')`）找到页面上的表格，然后获取表格中的所有行（`$('tr')`）。 2. **设定每页行数**：确定每页应该显示的行数，这可以根据用户的偏好或实际需求来设置。 3. ...

    利用lodop制作表格的一个demo

    "printTable.js"是用于处理表格打印的JavaScript文件。在这个示例中，它可能包含了将网页中的表格数据转化为适合打印的格式，以及调用LODOP API进行打印操作的函数。开发者可以使用LODOP的`SET_PRINT_TABLE`方法来...

    js操作word打印

    如果需要在Word中动态创建表格并填充数据，可以使用Word的对象模型。例如，以下代码创建一个3行5列的表格，并在其中填充数据： ```javascript var wordApp = new ActiveXObject("Word.Application"); var doc = ...

    layui的表格table选中数据后可打印本行数据

    本示例主要关注如何在layui的表格中实现选中某一行数据后，仅将该行数据打印的功能。这个功能在数据查看和报告生成等场景中非常实用，可以提高用户的操作体验。 首先，你需要了解layui的表格组件的基本用法。layui...

    JS打印报表控件

    "JS打印报表控件"是专门为JavaScript设计的一种工具，它允许开发者在Web应用中实现报表的打印功能，包括分页打印和打印预览，从而提供更丰富的用户体验。 在Web开发中，打印功能通常是必不可少的，尤其是对于那些...

    easyui datagrid 表格 打印

    4. **使用JavaScript打印库**：可以利用像jsPDF这样的库，将Datagrid数据转换为PDF文档，再进行打印。这种方式不仅能够保留格式，还便于用户保存和分享。 5. ** formatter回调**：在打印前，通过遍历Datagrid的所有...

    Js打印功能，支持局部打印

    "Js打印功能，支持局部打印"这一主题，主要涉及的是JavaScript在网页中实现打印的功能，特别是如何实现对特定区域（局部）的打印。 JavaScript是一种广泛用于网页开发的脚本语言，它可以直接在用户的浏览器上运行，...

    jquery.PrintArea.js-2.4.0-打印功能.rar

    例如，结合Ajax获取数据后，动态生成表格，然后利用PrintArea.js打印表格： ```javascript // 假设你已经获取到数据并填充到了#myTable $.ajax({ url: "getData.php", success: function(data) { var tableData ...

    打印table表格数据

    资源包包括一个打印页面和两个JavaScript（js）文件，这表明它依赖于前端技术来处理表格的打印工作。 首先，我们来看“打印数据”这一标签。在网页环境中，打印数据通常涉及浏览器的打印功能。开发者可以通过...

    js 进行打印控制 打印时隐藏按钮

    // 打印前隐藏表格中的某列 function beforePrint() { var opTDS = document.getElementsByName("op_TD"); for (var i = 0; i ; i++) { opTDS[i].style.display = 'none'; } } // 打印后恢复表格显示 function ...

    js实现简单的打印表格

    在JavaScript中，实现简单的打印表格是一项常见的任务，尤其在网页应用中。本示例通过JavaScript动态创建HTML表格并展示数据，然后将表格内容输出到页面上。以下是对这段代码的详细解析： 首先，代码定义了一个名为...

    用JS控制表格的交替颜色.rar

    在实际应用中，可能还需要考虑动态加载的数据或者用户交互时表格的变化。例如，当表格有新行插入或删除时，可以监听`DOMSubtreeModified`事件，重新应用交替颜色的逻辑。 总结一下，用JS控制表格的交替颜色涉及到...

    js控制分页打印、打印分页示例

    代码如下: &lt;&#37;... charset=UTF-8″ pageEncoding=”UTF-8″%&gt; &lt;!... &lt;HEAD&gt;...javascript打印-打印页面设置-打印预览代码&lt;/TITLE&gt; &lt;META http-equiv=Content-Type content=”text/html

    js打印表格

    document.write('&lt;table&gt;')

    JS 实现web分页打印功能

    首先，`Window.print()`方法是JavaScript中用于调用浏览器内置的打印对话框的函数，用户可以在该对话框中选择打印机、页面设置等选项，然后开始打印操作。为了确保在各种浏览器中都能正常工作，我们需要关注以下几点...

    js打印，截取打印

    根据给定文件的信息，本文将围绕“JavaScript打印特定部分”的主题进行深入探讨，重点解析如何在Web页面中实现对特定内容的打印，并介绍几种常见的实现方法。 ### JavaScript 打印功能概述 在Web开发中，有时我们...

    js 打印插件

    3. **打印设置**：在JavaScript打印插件中，设置页眉和页脚是一项重要的功能。这通常通过CSS样式来实现，可以在打印样式表中定义特定的页眉和页脚内容，这些内容会在打印时出现在每一页的相应位置。同时，也可以通过...

Magicbox
Global site tag (gtag.js) - Google Analytics