预览有边框,打印去掉边框

楼主
我是社区第55878位番薯,欢迎点我头像关注我哦~
本帖最后由 lee_ 于 2015-8-30 23:13 编辑

描述:边框显示往往为标注单元格显示区域,但是在打印的时候有些不要求显示边框,这边提供一个预览显示边框,打印不显示边框的示例。同样附加js控制边框显示的部分。
先看一下相同单元格,有边框和没有边框在前端的差别。
可以看出,下面的单元格的td元素中的有一个元素和带边框的不一致,看看修改一致之后的效果。 修改为b1之后,单元格显示了正常的边框。

以下是一个完整示例:

以下是js部分://获取tr元素
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");
        }

至于为啥这样做打印的时候会没有边框,是因为第一行和第一列的边框是在页面加载之后才画上去的,而打印部分内容是打印页面加载初的内容。
ps:其实页面端的调试是很简单的,所有的单元格属性都可以在页面端处理掉。可以直接f12,改变单元格td元素的属性,可以使用两个单元格做对比操作。
分享扩散:
参与人数 +1 F币 +325 理由
传说哥 + 325 很给力!

查看全部评分

沙发
发表于 2015-8-30 11:33:45
楼主的帖子功能性很强,但是专业性也很强,
可以按照帮助文档的格式和风格进行整理,这样方便评分
也方便我们来按照教程一步步实现效果
参与人数 +1 F豆 +10 理由
传说哥 + 10 很给力!

查看全部评分

板凳
发表于 2015-8-31 10:34:26
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

3回帖数 1关注人数 12228浏览人数
最后回复于:2015-8-31 10:34

返回顶部 返回列表