2013-10-01 39 views
1

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

我已经尝试了这么多,但没有效果。

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

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

+0

有5列在表中,4标签(印刷数据)和1空文本框,其中用户可以填写任何值。我想打印整个表格数据,包括文本框的值。 – localhost

+0

请详细说明问题。不要添加评论,但先编辑你的问题。这几乎不会使问题清楚... –

+0

如果可能,请添加一些代码。 –

回答

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/

+0

@aorcsik ...非常感谢。它帮助了我很多,但它也隐藏了我网页上的所有文本框。 – localhost

+0

@aorcsik ...有什么我们可以用文本框的值打印文档,不要隐藏我们的网页文本框。 – localhost

+0

@localhost添加了一些更改,可恢复页面状态 – aorcsik

0

只需添加这种风格的文本框将隐藏在印刷

<style media="print"> 
    input{display:none;} 
</style> 
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