打印表javascript显示为纯文本_Javascript_Ajax

打印表javascript显示为纯文本

javascript ajax

打印表javascript显示为纯文本,javascript,ajax,Javascript,Ajax,我正在尝试使用javascript打印一个表表格html如下所示： <table id="rounded" runat=server summary="2007 Major IT Companies' Profit" style="position:relative;left:-45px;" > <tr> <th scope="col" class="rounded-company">header1<

我正在尝试使用javascript打印一个表

表格html如下所示：

    <table id="rounded" runat=server  summary="2007 Major IT Companies' Profit" style="position:relative;left:-45px;"  >

        <tr>
            <th scope="col" class="rounded-company">header1</th>
        <th scope="col" class="rounded-q1">header2</th>

            <th scope="col" class="rounded-q1">header3</th>
             <th scope="col" class="rounded-q1">header4</th>
              <th scope="col" class="rounded-q1">header5</th>
               <th scope="col" class="rounded-q1">header6</th>
                <th scope="col" class="rounded-q1">header7</th>
                 <th scope="col" class="rounded-q1">header8</th>

                   <th scope="col" class="rounded-q1">header9</th>
                   <th scope="col" class="rounded-q4"> header10</th>


        </tr>


</table>

<table id="rounded" runat=server  summary="2007 Major IT Companies' Profit" style="position:relative;left:-45px;"  >

            <tr>
                <th scope="col" class="rounded-company">header1</th>
            <th scope="col" class="rounded-q1">header2</th>

                <th scope="col" class="rounded-q1">header3</th>
                 <th scope="col" class="rounded-q1">header4</th>
                  <th scope="col" class="rounded-q1">header5</th>
                   <th scope="col" class="rounded-q1">header6</th>
                    <th scope="col" class="rounded-q1">header7</th>
                     <th scope="col" class="rounded-q1">header8</th>

                       <th scope="col" class="rounded-q1">header9</th>
                       <th scope="col" class="rounded-q4"> header10</th>


            </tr>
<tr>
                <td>value1</td>
                <td>value2</td>

                <td>value3</td>
                <td>value4</td>
                <td></td>
                <td>value6</td>
                <td>value7</td>
                <td>value8</td>

                <td>value9</td>
                <td>value10</td>
            </tr>
            <tr>
                <td>value1</td>
                <td>value2</td>

                <td>value3</td>
                <td>value4</td>
                <td></td>
                <td>value6</td>
                <td>value7</td>
                <td>value8</td>

                <td>value9</td>
                <td>value10</td>
            </tr>

</table>

<script type="text/javascript">
function printTable()

{


    var disp_setting = "toolbar=yes,location=no,directories=yes,menubar=yes,";
    disp_setting += "scrollbars=yes,width=1350, height=800";
    var content_vlue = $("#rounded").html();


    var docprint = window.open("", "", disp_setting);
    docprint.document.open();
    docprint.document.write('<link href="css/table2.css" type="text/css" rel="stylesheet" />');  
    docprint.document.write('<html><head><title>Inel Power System</title>');
    docprint.document.write('</head><body onLoad="self.print()"><center>');
    docprint.document.write(content_vlue);
    docprint.document.write('</center></body></html>');
    docprint.document.close();
    docprint.focus(); 
}

</script>


校长1
校长2
校长3
校长4
校长5
校长6
校长7
校长8
校长9
校长10

我将表的数据放入ajax中，因此表最终如下所示：

    <table id="rounded" runat=server  summary="2007 Major IT Companies' Profit" style="position:relative;left:-45px;"  >

        <tr>
            <th scope="col" class="rounded-company">header1</th>
        <th scope="col" class="rounded-q1">header2</th>

            <th scope="col" class="rounded-q1">header3</th>
             <th scope="col" class="rounded-q1">header4</th>
              <th scope="col" class="rounded-q1">header5</th>
               <th scope="col" class="rounded-q1">header6</th>
                <th scope="col" class="rounded-q1">header7</th>
                 <th scope="col" class="rounded-q1">header8</th>

                   <th scope="col" class="rounded-q1">header9</th>
                   <th scope="col" class="rounded-q4"> header10</th>


        </tr>


</table>

<table id="rounded" runat=server  summary="2007 Major IT Companies' Profit" style="position:relative;left:-45px;"  >

            <tr>
                <th scope="col" class="rounded-company">header1</th>
            <th scope="col" class="rounded-q1">header2</th>

                <th scope="col" class="rounded-q1">header3</th>
                 <th scope="col" class="rounded-q1">header4</th>
                  <th scope="col" class="rounded-q1">header5</th>
                   <th scope="col" class="rounded-q1">header6</th>
                    <th scope="col" class="rounded-q1">header7</th>
                     <th scope="col" class="rounded-q1">header8</th>

                       <th scope="col" class="rounded-q1">header9</th>
                       <th scope="col" class="rounded-q4"> header10</th>


            </tr>
<tr>
                <td>value1</td>
                <td>value2</td>

                <td>value3</td>
                <td>value4</td>
                <td></td>
                <td>value6</td>
                <td>value7</td>
                <td>value8</td>

                <td>value9</td>
                <td>value10</td>
            </tr>
            <tr>
                <td>value1</td>
                <td>value2</td>

                <td>value3</td>
                <td>value4</td>
                <td></td>
                <td>value6</td>
                <td>value7</td>
                <td>value8</td>

                <td>value9</td>
                <td>value10</td>
            </tr>

</table>

<script type="text/javascript">
function printTable()

{


    var disp_setting = "toolbar=yes,location=no,directories=yes,menubar=yes,";
    disp_setting += "scrollbars=yes,width=1350, height=800";
    var content_vlue = $("#rounded").html();


    var docprint = window.open("", "", disp_setting);
    docprint.document.open();
    docprint.document.write('<link href="css/table2.css" type="text/css" rel="stylesheet" />');  
    docprint.document.write('<html><head><title>Inel Power System</title>');
    docprint.document.write('</head><body onLoad="self.print()"><center>');
    docprint.document.write(content_vlue);
    docprint.document.write('</center></body></html>');
    docprint.document.close();
    docprint.focus(); 
}

</script>


校长1
校长2
校长3
校长4
校长5
校长6
校长7
校长8
校长9
校长10
价值1
价值2
价值3
价值4
价值6
价值7
价值8
价值9
价值10
价值1
价值2
价值3
价值4
价值6
价值7
价值8
价值9
价值10

我正在使用javascript打印表格，如下所示：

    <table id="rounded" runat=server  summary="2007 Major IT Companies' Profit" style="position:relative;left:-45px;"  >

        <tr>
            <th scope="col" class="rounded-company">header1</th>
        <th scope="col" class="rounded-q1">header2</th>

            <th scope="col" class="rounded-q1">header3</th>
             <th scope="col" class="rounded-q1">header4</th>
              <th scope="col" class="rounded-q1">header5</th>
               <th scope="col" class="rounded-q1">header6</th>
                <th scope="col" class="rounded-q1">header7</th>
                 <th scope="col" class="rounded-q1">header8</th>

                   <th scope="col" class="rounded-q1">header9</th>
                   <th scope="col" class="rounded-q4"> header10</th>


        </tr>


</table>

<table id="rounded" runat=server  summary="2007 Major IT Companies' Profit" style="position:relative;left:-45px;"  >

            <tr>
                <th scope="col" class="rounded-company">header1</th>
            <th scope="col" class="rounded-q1">header2</th>

                <th scope="col" class="rounded-q1">header3</th>
                 <th scope="col" class="rounded-q1">header4</th>
                  <th scope="col" class="rounded-q1">header5</th>
                   <th scope="col" class="rounded-q1">header6</th>
                    <th scope="col" class="rounded-q1">header7</th>
                     <th scope="col" class="rounded-q1">header8</th>

                       <th scope="col" class="rounded-q1">header9</th>
                       <th scope="col" class="rounded-q4"> header10</th>


            </tr>
<tr>
                <td>value1</td>
                <td>value2</td>

                <td>value3</td>
                <td>value4</td>
                <td></td>
                <td>value6</td>
                <td>value7</td>
                <td>value8</td>

                <td>value9</td>
                <td>value10</td>
            </tr>
            <tr>
                <td>value1</td>
                <td>value2</td>

                <td>value3</td>
                <td>value4</td>
                <td></td>
                <td>value6</td>
                <td>value7</td>
                <td>value8</td>

                <td>value9</td>
                <td>value10</td>
            </tr>

</table>

<script type="text/javascript">
function printTable()

{


    var disp_setting = "toolbar=yes,location=no,directories=yes,menubar=yes,";
    disp_setting += "scrollbars=yes,width=1350, height=800";
    var content_vlue = $("#rounded").html();


    var docprint = window.open("", "", disp_setting);
    docprint.document.open();
    docprint.document.write('<link href="css/table2.css" type="text/css" rel="stylesheet" />');  
    docprint.document.write('<html><head><title>Inel Power System</title>');
    docprint.document.write('</head><body onLoad="self.print()"><center>');
    docprint.document.write(content_vlue);
    docprint.document.write('</center></body></html>');
    docprint.document.close();
    docprint.focus(); 
}

</script>


函数printTable（）
{
var disp_setting=“工具栏=是，位置=否，目录=是，菜单栏=是，”；
显示设置+=“滚动条=是，宽度=1350，高度=800”；
var content_vlue=$（“#四舍五入”）.html（）；
var docprint=window.open（“，”，显示设置）；
docprint.document.open（）；
docprint.document.write（“”）；
docprint.document.write（'Inel Power System'）；
docprint.document.write（“”）；
docprint.document.write（内容）；
docprint.document.write（“”）；
docprint.document.close（）；
docprint.focus（）；
}

问题是，表是作为innertext而不是innerhtml打印的（没有行，没有列，没有标题）

如果我使用这个表（来自页面源代码）并尝试打印它（不使用ajax），它就可以正常工作

有什么问题吗

提前感谢您的帮助

您需要在写入打印文档的HTML中包含

标记。调用

.html（）
或者，您可以将该表包装在另一个元素（a
或其他元素）中，然后：
var content_vlue = $('#rounded').parent().html();

太快了！尖尖的你是最好的