Question

我有一个包含多行（记录）的表，我正在使用循环创建。在每一行中，我都有一个文本框，我将在其中插入任何值。我想通过window.print（）方法或任何其他合适的方法打印此表数据，并使用我使用javascript插入的文本框值。

我已经尝试过这么多，但一切都运作不错。

<html>
<head>
<title>Main Page</title>
</head>
<body>
<table cellspacing="0" cellpadding="5" id="tabledata" border="1">
  <tbody>
    <tr>
      <th>Id</th>
      <th>Date</th>
      <th>Profile Id</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>109</td>
      <td>01-10-2013</td>
      <td>15500</td>
      <td>Test Name</td>
      <td><input type="text" style="width: 52px;"></td>

    </tr>
    <tr>
      <td>96</td>
      <td>01-10-2013</td>
      <td>78394</td>
      <td>Ram</td>
      <td><input type="text" style="width: 52px;"></td>

    </tr>
    <tr>
      <td>71</td>
      <td>01-10-2013</td>
      <td>85868</td>
      <td>Poppy Daisy</td>
      <td><input type="text" style="width: 52px;"></td>

    </tr>
    <tr>
      <td>68</td>
      <td>01-10-2013</td>
      <td>14463</td>
      <td>Amy Freddie</td>
      <td><input type="text" style="width: 52px;"></td>

    </tr>
    <tr>
      <td>109</td>
      <td>01-10-2013</td>
      <td>44172</td>
      <td>Mohan</td>
      <td><input type="text" style="width: 52px;"></td>

    </tr>
  </tbody>
</table>
</body>
</html>

这是我的表结构的示例格式，但这不是固定的，因为我从我的数据库中获取数据。我想打印表格中显示的整个数据。

Answer 1

创建一个打印方法，用文本框中的值替换文本框，然后调用window.print()

假设您使用jQuery：

function print_flat() {
    // hide fields, show values
    $("input[type=text]").each(function() {
        $("<div>" + $(this).val() + "</div>").insertBefore($(this));
        $(this).hide();
    });

    window.print(); // print (modal)

    // remove values, show fields
    $("input[type=text]").each(function() {
        $(this).prev("div").remove();
        $(this).show(); 
    });
}

上述函数遍历所有文本字段，并将其内容添加到文本字段之前的div中，然后隐藏文本字段并打印页面。

更新：由于打印对话框是模态的，它会在打印对话框关闭后运行其后的代码，因此我们可以恢复页面的状态。在这里试试：http://jsfiddle.net/aorcsik/hZkZa/

Answer 2

只需添加此样式，您的文本框将隐藏在打印中

<style media="print">
    input{display:none;}
</style>

Answer 3

我从您的问题描述中获得了什么，我认为您需要以下解决方案 -

<body>
    <table border=1>
        <script>
            try
            {
                for(i=1;i<=10;i++)
                {
                    j=0;
                    document.write("<tr><td><input type=text id=t"+i+" onblur=\"for(j=0;j<getElementsByName('td"+i+"').length;j++)document.getElementsByName('td"+i+"')[j].innerHTML=this.value\">\
                <td name=td"+i+">\
                <td name=td"+i+">\
                <td name=td"+i+">\
                <td name=td"+i+">");
                }
            }
            catch(err)
            {
                alert(err);
            }
        </script>
    </table>
</body>

现在在文本框中键入，当文本框失去焦点时，文本框中的文本会进入表格的列

在 fiddle_solution_page

中查看此内容

通过window.print（）方法打印输入框运行时值

3 个答案: