JS实现预览时有边框，打印时无边框效果

平时在设置报表时，边框（内容）显示往往用来标注单元格显示区域，但是在打印时又不需要显示出来，如果遇见这种需求我们该任何处理呢…？这篇文档提供一个预览时显示边框，打印时不显示边框（内容）的解决方案。

图例1：

图例二：

我们可以通过添加加载结束 JS 事件来实现！

示例 1 脚本：

var tr = $("tr", $('div.content-container'));  
for(var i=0;i<tr.length;i++){  
    var td=tr.eq(i).children().eq(0);  
    td.removeClass("b0");  
    td.addClass("b1");  
    }  
for(var j=0;j<tr.eq(0).children().length;j++){  
    var td = tr.eq(0).children().eq(j);  
    td.removeClass("b0");  
    td.addClass("b1");  
    }
示例2脚本：
var tr = $("tr", $('div.content-container')); 
for(var i=0;i<tr.length;i++)
{
     for(var j=0;j<tr.eq(i).children().length;j++) 
     {
     //获取td元素，也就是页面上的单元格 
       var td = tr.eq(i).children().eq(j);
       td.removeClass("b0"); td.addClass("b1");
     }
 }

注：因为边框是在页面加载之后才‘画’上去的，而打印部分内容是打印页面加载初的内容。

3.1 示例一

最终效果：预览时给某一行某一列内容单元格添加边框，打印时无边框！以第 1 行第 1 列为例：

1）打开模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\form\简单填报示例.cpt ， 选中内容单元格，将边框全部设置为“无”。

2）选择模板>模板 Web 属性>填报页面设置，为该模板单独设置-事件设置（加载结束），如下图所示：

JS 代码如下：

var tr = $("tr", $('div.content-container'));  
for(var i=0;i<tr.length;i++){  
        //获取td元素，也就是页面上的单元格，这边获取的是第一列  
        var td=tr.eq(i).children().eq(0);  
        td.removeClass("b0");  
        td.addClass("b1");  
        }  
for(var j=0;j<tr.eq(0).children().length;j++){  
        //获取td元素，也就是页面上的单元格，这边获取的是第一行  
        var td = tr.eq(0).children().eq(j);  
        td.removeClass("b0");  
        td.addClass("b1");  
        }  

3）保存并预览，以填报方式打开并打印，效果见上图1。

3.2 示例二

最终效果：预览时给所有内容单元格添加边框，打印时无边框！

1）同上，将上例中加载结束事件 JS 代码修改为：

var tr = $("tr", $('div.content-container'));  
for(var i=0;i<tr.length;i++){  
         for(var j=0;j<tr.eq(i).children().length;j++)
         {  
        //获取td元素，也就是页面上的单元格
        var td = tr.eq(i).children().eq(j);  
        td.removeClass("b0");  
        td.addClass("b1");  
        }   
        }

2）保存并预览，以填报方式打开并打印，效果见上图 2。

移动端不支持各种打印和导出方式