1

我有一个使用循环创建的包含多行（记录）的表。在每一行中，我都有一个文本框，我将在其中插入任何值。我想通过 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>

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

4

3 回答 3

0

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

<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中检查这个

于 2013-10-01T11:47:58.427 回答
0

创建一个打印方法，将文本框替换为其中的值，然后调用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/

于 2013-10-01T09:11:44.090 回答
0

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

<style media="print">
    input{display:none;}
</style>
于 2013-10-01T10:43:44.947 回答