1

ループを使用して作成している複数の行 (レコード) を持つテーブルがあります。各行には、任意の値を挿入するテキスト ボックスがあります。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>

これはサンプル形式のテーブル構造ですが、データベースからデータをフェッチしているため、これは修正されていません。table に示されているデータ全体を印刷したい。

4

3 に答える 3

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 に答える