如何打印设置为display：none的表 [英] How to print a table that is set to display:none

问题描述

我现在已经尝试了一切。我的代码100％工作，但只要我将表设置为隐藏，打印就不起作用。



页面为空白，所有显示的都是标题。任何人都可以帮我这个，因为我不知道我哪里出错了



这是我的打印javascript代码

I have now tried everything. My code works 100% but as soon as i set my table to hidden, the print does not work.

The page is blank and all that shows up is the header. Can any one please assist me with this as I have no idea where i am going wrong

Here is my javascript code for the print

function printTbl() {
       var TableToPrint = document.getElementById('Table1');
       var htmlToPrint = '' +
           '<style type="text/css">' +
               'table th, table td {' +
               'padding: 5px; ' +
               '}' +
               ' #walkheader{border-left: none!important; border-right: none!important;}' +
               ' #Table1{padding: 4px; border-collapse:collapse; font; font-size:12pt;}' +
               ' #printHeader2 td{ border-bottom: solid black 1px; border-right: solid black 1px!important; }' +
               ' td{ border-bottom: solid black 1px; border-right: solid black 1px!important; border-left: solid black 1px!important; }' +
           '</style>';
       htmlToPrint += TableToPrint.outerHTML;
       newWin = window.open("");
       newWin.document.write("<h2>Header</h2>");
       newWin.document.write(htmlToPrint);
       newWin.print();
       newWin.close();
   }

下面是我的按钮

Below is my button

<a href="java<!-- no -->script:void(0);" id="printPage" >Print</a> 

然后在我的桌子上

And then on my table

<table id="Table1"  runat="server" style="display:none"> 
                    <tr  runat="server" id="printHeader1_row">
                        <td  runat="server" id="walkheader" colspan="2"></td>
                    </tr>
                    <tr style="border-bottom: solid 1px black"  runat="server" id="printHeader2">
                        <td>Time</td>
                        <td>Name and Surmane</td>
                    </tr>       </table>

For Css我有以下

< style media =print>

@media print {

table {

显示：表格！重要

}

}

< / style>

For Css i have the following
<style media="print">
@media print{
table{
display:table!important
}
}
</style>

推荐答案

删除javascript中的style属性，如下所示。





var TableToPrint = document.getElementById（'Table1'）;



document.getElementById（Table1）。removeAttribute（style）;



var htmlToPrint =''+





我认为它应该有效。

Remove the style attribute in javascript as shown below.


var TableToPrint = document.getElementById('Table1');

document.getElementById("Table1").removeAttribute("style");

var htmlToPrint = '' +


I think it should work.

我认为你的问题是你设置的一切要显示的表：无，表从页面中删除。所以你的javascript代码将在这一行失败：



var TableToPrint = document.getElementById（'Table1'）;



，因为没有任何带有此ID的元素。





如果它没有在javascript代码中定义你的CSS并非真的有必要。

I think that your problem is that as soon as you set table to display:none, the table is removed from page. So your javascript code will fail on this line:

var TableToPrint = document.getElementById('Table1');

because there is not any element with this id.


Also don't define your css in javascript code if it is not really necessary.

这篇关于如何打印设置为display：none的表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！