Question

使用下面的代码，我可以打印表格，但我无法打印输入的值。任何人都可以帮助.....

这是代码.....

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

Answer 1

<强> Demo Fiddle
您可以使用该值替换所有输入，然后可以打印表格...使用javascript完全执行它非常困难但不是不可能。

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();
}

Answer 2

divToPrint=document.getElementById('demo');

将DOM输入元素与第一次加载的方式相同。例如，如果您的输入有

value="test"

在您的html代码中，它将在打印中显示。

Answer 3

这里的问题不是表格，而是input元素。当用户输入数据时，它将存储在文档对象模型中value个元素节点的input属性中。但是当你在另一个文档中编写封闭的div元素时，只会写入元素及其HTML属性 - 这些值将被丢弃。

解决方案是通过根据value属性设置value属性，使数据成为标记的一部分。为此，您可以先使用cloneNode方法克隆div元素，然后使用getElementsByTagName方法获取其中的所有input元素。这意味着您将通过以下内容替换printDiv函数中的第一个语句：

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

如何在HTML中打印表格

3 个答案: