使用thead,tbody,tfoot来实现表格的分页打印

该篇文章是我于2009年6月10日通过自己编写的工具，批量从位于在博客园的博客站点(http://chenxizhang.cnblogs.com)同步而来。文章中的图片地址仍然是链接到博客园的。特此说明！ 陈希章 原文地址：http://www.cnblogs.com/chenxizhang/archive/2009/06/03/1495248.html 原文标题：使用thead,tbody,tfoot来实现表格的分页打印 原文发表：2009/6/3 4:26:00

当我们的页面中有一个很长的表格时，我们通常都希望在每页中都显示表头，或者一个表尾。那么该如何来控制打印的时候这样的行为呢？

HTML 4.01支持几个新的元素thead,tbody,tfoot，顾名思义，他们分别代表了表格的头，主体和尾。

下面我们来看一个例子

   
   

 

   

 

   

       
           
       
   

   

姓名	年龄

           

陈希章

       

100

               

陈希章

       

100

               

陈希章

       

100

       

这是一个表尾

 

如果有了这样的内容，那么在打印的时候就会出现下面的效果（请注意看，第一页和第二页都有表头和表尾）

是不是很酷啊？呵呵

 

需要注意的是：该功能仅在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(' type="text/css" rel="stylesheet" href="' + links[i].href + '">');

//        doc.write('

doc.write('

' + content.innerHTML + '

');                 

        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('http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> ');
        var links = window.document.getElementsByTagName('link');
        for (var i = 0; i < links.length; i++)
            if (links[i].rel.toLowerCase() == 'stylesheet')
            doc.write(' type="text/css" rel="stylesheet" href="' + links[i].href + '">');
//        doc.write('

        doc.write('');
        doc.write('

' + content.innerHTML + '

');
        doc.write('');       

        doc.close();
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
        document.body.removeChild(iframe);
}

如此，整个世界就清净了

作者：

陈希章
出处：http://blog.csdn.net/chen_xizhang
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。