使用thead,tbody,tfoot来实现表格的分页打印
当我们的页面中有一个很长的表格时,我们通常都希望在每页中都显示表头,或者一个表尾。那么该如何来控制打印的时候这样的行为呢?
HTML 4.01支持几个新的元素thead,tbody,tfoot,顾名思义,他们分别代表了表格的头,主体和尾。
下面我们来看一个例子
<table>
<thead>
<tr><td>姓名</td><td>年龄</td></tr>
</thead>
<tbody>
<tr>
<td>陈希章</td>
<td>100</td>
</tr>
<tr>
<td>陈希章</td>
<td>100</td>
</tr>
<tr>
<td>陈希章</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">这是一个表尾</td>
</tr>
</tfoot>
</table>
如果有了这样的内容,那么在打印的时候就会出现下面的效果(请注意看,第一页和第二页都有表头和表尾)
是不是很酷啊?呵呵
需要注意的是:该功能仅在IE中受支持,其他浏览器不一定能有这个效果
同时,如果说我们需要使用局部打印的功能,上次我们提到用脚本的方式
//打印某个内容
function PrintContent(el) {
var iframe = document.createElement('IFRAME');
var content=document.getElementById(el);
var doc = null;
iframe.style.position="absolute";
iframe.style.width="0px";
iframe.style.height="0px";
iframe.style.left="-500px";
iframe.style.top="-500px";
//$(iframe).attr('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
var links = window.document.getElementsByTagName('link');
for (var i = 0; i < links.length; i++)
if (links[i].rel.toLowerCase() == 'stylesheet')
doc.write('<link type="text/css" rel="stylesheet" href="' + links[i].href + '"></link>');
// doc.write('<div class="' + $(el).attr("class") + '">' + $(el).html() + '</div>');
doc.write('<div class="' + content.className + '">' + content.innerHTML + '</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
document.body.removeChild(iframe);
}
该代码的确可以实现打印,但会丢失thead等特性,我们需要修改成下面这样
//打印某个内容
function PrintContent(el) {
var iframe = document.createElement('IFRAME');
var content=document.getElementById(el);
var doc = null;
iframe.style.position="absolute";
iframe.style.width="0px";
iframe.style.height="0px";
iframe.style.left="-500px";
iframe.style.top="-500px";
//$(iframe).attr('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
doc.write('<!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=utf-8" />');
var links = window.document.getElementsByTagName('link');
for (var i = 0; i < links.length; i++)
if (links[i].rel.toLowerCase() == 'stylesheet')
doc.write('<link type="text/css" rel="stylesheet" href="' + links[i].href + '"></link>');
// doc.write('<div class="' + $(el).attr("class") + '">' + $(el).html() + '</div>');
doc.write('</head><body>');
doc.write('<div class="' + content.className + '">' + content.innerHTML + '</div>');
doc.write('</body></html>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
document.body.removeChild(iframe);
}
如此,整个世界就清净了
转载于:https://www.cnblogs.com/chenxizhang/archive/2009/06/03/1495248.html
使用thead,tbody,tfoot来实现表格的分页打印相关推荐
- HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行,跨列
在HTML中表格是作为一个整体来解析的,解析完才会在页面显示,如果表格很复杂很长,加载时间很长,用户体验就不好.所以这里就要用到表格结构标签,解析一部分就显示一部分,不用等表格全部加载完再显示. 表格 ...
- 计算机如何分页打印,[计算机]Excel表格如何分页打印、自动分页、取消分页等技巧.doc...
[计算机]Excel表格如何分页打印.自动分页.取消分页等技巧.doc 上传人:max****ui 文档编号:13468786 上传时间:2019-01-18 格式:DOC 页数:5 大小:334.1 ...
- Excel职场小技巧:教你如何分页打印Excel表格
当我们在制作Excel表格时候,为了省麻烦直接在里面制作多个表格,但又不知道如何才能分页将这些表格打印出来,那么遇到这种情况我们应该如何操作呢?是重新制作多个Excel表格,再一个个的打印,还是有什么 ...
- 淘宝html 表格,Html中的table包括 caption、col、colgroup、thead、tfoot 以及 tbody
HTML 定义和用法 简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成. tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元. 更复杂的 HTML ...
- HTML表格中包多个CApTion,Html中的table包括 caption、col、colgroup、thead、tfoot 以及 tbody...
HTML 定义和用法 简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成. tr 元素定义表格行,th 元素定义表头,td 元素定义表格单元. 更复杂的 HTML ...
- 扩展jquery实现客户端表格的分页、排序
下面链接中是我用jQuery的扩展来实现的表格分页和排序,使用这个扩展必须加上表头<thead>和<tbody>标签,因为我是 通过<tbody>来进行分页的,要是 ...
- 在 JavaScript 中为任何表格添加分页
分页是每个人都讨厌在他们的网站上实现的那些事情之一,并且在数据大小需要它之前我们会避免这样做.或者直到页面太长以至于滚轮断开并且浏览器崩溃.并且有充分的理由.通常,这是一项有些乏味且不必要的复杂任务. ...
- PHP笔记-表格及分页功能
运行截图如下: 前端代码如下: Student.php <!DOCTYPE html> <html lang="en"> <head><m ...
- html打印表格自动分页,Web分页打印 细线表格+分页打印之终极攻略
Web分页打印 细线表格+分页打印之终极攻略 发布时间:2009-03-01 23:46:40 作者:佚名 我要评论 最近给客户做打印的时候,客户提出打印时不要打印该页面的头,只是打印表格里面 ...
最新文章
- pip安装提示PermissionError: [WinError 5]错误问题解决
- 深度学习项目中在yaml文件中定义配置,以及使用的python的PyYAML库包读取解析yaml配置文件
- Apache Mina2.x网络通信框架使用入门
- 知乎上高赞的40个有趣回复,很精辟!
- 记录一下(session共享的文章,wcf记录一下学习地址,Firebug)
- php 字符串 大括号,PHP中的字符串大括号
- Problem D: 顺序串的基本运算
- C#中get和SET
- java简历 技术能力_java后台开发简历专业技能怎么写
- 为什么C语言简洁灵活方便,C语言语法简洁紧凑使用方便灵活具有丰富的运算.ppt...
- 最全jar包下载地址
- 服务器更换固态后如何安装系统,更换固态硬盘后安装操作系统的两种常用方法...
- matlab函数accumarray,matlab函数调用问题
- Vulnhub-Earth
- WinX教程之我的实战(三)
- 申报指南|教你如何优雅地报名、提交项目申请书
- 新浪微博小工具--PC遥控器1.0发布
- 高手帮忙,菜鸟提问关于Query的基础问题!很急!就剩这些分了!好心人帮忙!
- vue echarts中改变canvas长和宽 自适应
- 计算机社团基础,计算机社团招新策划