CSS

[OK]をので、私はこのコードを持っている：CSS

HTML：

<body> 
    <div>...</div> 
    <table id="printthis"> 
     <tr> 
      <td>...</td> 
      ... 
      ... 
     </tr> 
    </table> 
    <someOtherElementIdontNeed /> 
    <div>...</div> 
</body>

CSS：

@media print { 
    body *:not(.printable) { 
     display: none; 
    } 
    .printable { 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 
}

JS：（私はHTMLのどこかに持ってこれをトリガし（印刷する））

jQuery(document).ready(function(){ 
    jQuery("#print").click(function(event){ 
     jQuery("#printthis").addClass("printable"); 
     jQuery("#printthis *").addClass("printable"); 
     window.print(); 
    }); 
});

基本的には、 <table>の内容は、タグ内にない他のものを除いてすべて印刷されます。 jQuery.addClassを起動して、印刷可能なものとそうでないものを区別しました。

JSスクリプトが正常に動作しているようですが、クローム開発ツールを使用してチェックしました。私のCSSはちょうどそれらを認識していないようです。

:not()セレクタが処理するように設計されているとはどういうことでしょうか？印刷がトリガされると、私は取得していますすべてが空白のページが...表示.printableクラス

出典

2016-07-12 Valkyrurr

'jQueryの（ "＃プリント"）（関数（イベント））をクリック{ のjQuery （ "：not（#printthis）"）。addClass（ 'dontprint'）; window.print（）; }）; ' in css。 '。dontprin {display：none} 'このようにすることができます – guradio

印刷可能なクラスの中のすべての要素はまだ設定されていますdisplay：noneだからあなたは何も見ないのです。 – user3154108

@ user3154108、詳しく説明してください。私は彼らがそのルールから免除されていると思っています。 – Valkyrurr

とのそれらを免除しないnoneなど、すべての要素が

@media print { 
    body *:not(.printable, .printable *) { 
    display: none; 
    } 
    .printable { 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 
}

出典

2016-07-12 10:34:47 user3154108

がここjsfiddle

を参照してみてください

同じIDを使う（#printthis）代わりに.printthis
を使用すると、id-sのみのクラスを複製することはできません。あなたのためには機能しませんが、この例では、#printthis idが1つしかない場合にのみ動作します。

ALSO例えば、すべてのJQで.printableクラスを追加した後

<div> 
    <div class="printthis"> PRINT ME </div> 
</div>

を使用していないため、クラス.printthis

を持っていない他の要素をprint..insideする要素を持ってしないように注意してください

@media print { 
body *:not(.printable) { display:none } 
}

から.printthis、コードを持つ要素は、親要素が非表示になりますし、あなたが

を印刷する際に、その要素のすべての子は表示されません

<body> 
<div>DO NOT PRINT</div> 
<table class="printthis"> 
    <tr> 
     <td>SHOW</td> 
     SHOW 
     SHOW 
    </tr> 
</table> 
<div class="printthis">TESTPRINT</div> 
<someOtherElementIdontNeed /> 
<div>DO NOT PRINT</div> 
<button id="print"> PRINT</button> 
</body>

のCss：JSコード

jQuery("#print").click(function(event){ 
    jQuery(".printthis").addClass("printable"); 
    jQuery(".printthis *").addClass("printable"); 
    window.print(); 
});

更新されたHTML UPDATED 210

。

@media print { 
body *:not(.printable) { 
    display: none; 
} 
.printable { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
}

出典

2016-07-12 10:35:29

'（document）.ready'節を閉じる余分な'） 'を指していますか？編集：それは誤っている – Valkyrurr

あなたはこれを持っていた '（イベント）'の後に余分な '）'を持っていなかった： '.click（function（event））{'あなたは ' エラー： 'Uncaught SyntaxError：予期せぬトークン）' '（ドキュメント）.ready'は' jsfiddle'では不要なので削除しましたが、保存することができます –

はい、気づきました。それはタイプミスです。実際のコードは意図した通りではなく、意図して動作しています。 – Valkyrurr

答えて

関連する問題