Home/ Questions/Q 7618097
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T03:18:47+00:00

I am trying to print a table using javascript the table html is like

  • 0

I am trying to print a table using javascript

the table html is like this:

    <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>

I bring the table’s data throw ajax so in the end the table look like this:

<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>

I am using javascript to print the table like this:

<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>

the problem is that the table is printed as innertext instead of innerhtml(no rows no columns no header)

If I take this table (from page source ) and try to print it(without ajax) it works just fine.

What could be the problem?

Thanking you in advance for any help

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to include the <table> tag in the HTML you’re writing to the print document. Calling .html() just gets you what’s inside the table tags.

    Alternatively you could wrap the table in another element (a <div> or something) and then:

    var content_vlue = $('#rounded').parent().html();
    • 0