CODEWITHSUNDEEP
javascripthtmlinputprinting
user2174748
user2174748

Reputation: 1

How to print table in HTML

Using below code i can able to print table, but i not able to print the value which i was entered. any one can help.....

Here is the code.....

<!doctype html>
<html>
    <head>
        <script>
            function printDiv()
            {
              var divToPrint=document.getElementById('demo');
              newWin= window.open("");
              newWin.document.write(divToPrint.outerHTML);
              newWin.print();
              newWin.close();
            }
        </script>
    </head>
    <body class="tundra">
        <div>
            <table   id="demo" >
                <tr>
                    <td><input type="text" ></td>
                    <td> cell 11    </td>
                </tr>
                <tr>
                    <td><input type="text" ></td>
                    <td> cell 12</td>
                </tr>
            </table>
        </div>
            <input type="button" value="Print" onclick="printDiv()" />
    </body>
</html>

Upvotes: 0

Views: 1390

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

The issue here is not the table but the input elements. When the user enters data, it is stored in the value properties of input element nodes in the Document Object Model. But when you write the enclosing div element in another document, only the elements and their HTML attributes are written—the values are discarded.

The solution is to make the data part of the markup, by setting the value attribute according to the value property. For this, you can first clone the div element using the cloneNode method and then the getElementsByTagName method to get all input elements inside it. This means that you would replace the first statement inside the printDiv function by the following:

          var divToPrint=document.getElementById('demo').cloneNode(true);        
          var inputs = divToPrint.getElementsByTagName('input');
          for(var i = 0; i < inputs.length; i++)
            inputs[i].setAttribute('value', inputs[i].value);

Upvotes: 0

Bhavik
Bhavik

Reputation: 4904

Demo Fiddle
You can replace all inputs with there value and then can print the table... Doing it completely using javascript is pretty difficult but not impossible.

jQuery 

function printDiv() {
    $('input[type=text]').each(function () {
        var cell = $(this);
        cell.replaceWith('<span>' + cell.val() + '</span>');
    });
    var divToPrint = document.getElementById('demo');
    newWin = window.open("");
    newWin.document.write(divToPrint.outerHTML);
    newWin.print();
    newWin.close();
}

Upvotes: 1

Hamlett
Hamlett

Reputation: 402

divToPrint=document.getElementById('demo');

Will take the DOM input elements in the same way they where loaded at first time. For example, if your input has 

value="test"

in your html code, then it will be showed in the print.

Upvotes: 0

Related Questions