1

特定のテーブル データ要素を印刷したいと考えています。

テーブル構造は以下の通りです。 

| Table No | Table Code | Description | Action |
     4           8785        abc         Print
     5           7463        cde         Print
     6           5645        fgh         Print

[印刷] リンクをクリックしたときに、行の最初の 2 列 (テーブル番号、テーブル コード) の要素のみを印刷したいと考えています。

以下の JavaScript コードは、行全体を出力します。

<script type="text/javascript">
    function Print(a) {
        alert("heloo");
        var row = $(a).closest("tr").clone(true);
        var printWin = window.open('', '', 'left=0", ",top=0,width=1000,height=600,status=0');
        var table = $("[id*=tableCodeTable]").clone(true);
        $("tr", table).not($("tr:first-child", table)).remove();
        table.append(row);
        $("tr td:last,tr th:last", table).remove();
        var dv = $("<div />");
        dv.append(table);
        printWin.document.write(dv.html());
        printWin.document.close();
        printWin.focus();
        printWin.print();
        printWin.close();
    }
</script>

印刷リンクの HTML コード

<a href="javascript:;" onclick="Print(this)">Print</a>

テーブルの html コード

<table border="2px" id="tableCodeTable" class="table">
  <tr>
        <th>
            Table No
        </th>
        <th>
            Table Code
        </th>
        <th>
            Description
        </th>         
        <th>
            Action
        </th>
    </tr>
    <tbody>
 <% foreach (var item in Model.Mapping)
 {%>   
   <tr id="<%=item.Id%>">

        <td id="no_<%=item.Id%>" class="two">
             <input type="hidden" value=" <%=item.Id%>"/>
            <%=item.TableNo%>
        </td>
        <td>
            <%=item.TableCode%>
        </td>
      <td id="dc_<%=item.Id%>" class="twoo"> 
           <%=item.Description%>
       </td>          
        <td>      
             <a href="javascript:;" onclick="Print(this)">Print</a>
        </td>
  </tr>            
 <% } %>
 </tbody>   
</table>

これら2つの要素だけを印刷するにはどうすればよいですか? 助けてください。

4

1 に答える 1

0

これには、次の 2 つの方法があります。

  1. 印刷したいものだけを表示する個別の CSS スタイルシートを作成します。残りは次のように設定されますdisplay: none;

    その CSS を でリンクしmedia="print"ます。そのため、印刷中のみ使用されます。display: none;この CSS で設定された残りの列およびその他の HTML 要素用。自動的に適用されます。

  2. window.open()もう1つの方法は、印刷したいものだけを表示し、 100ミリ秒程度window.print()後に呼び出す新しいウィンドウを開くことです。timeout印刷プロセスを開始する前にデータが適切にロードされるようにします。

これには、さらに単純な別のアプローチを使用することもできます。setTimeOut を使用せずに印刷する

var prnWin = window.open(somePath);
prnWin.onload = function() {
    prnWin.print();
};

あなたがやりたいことを達成するための他の方法もあるかもしれません。しかし、私が言及した最初のアプローチがあなたに最適だと思います。

于 2013-10-04T06:47:15.610 に答える