0

データのテーブルがあり、各行にはチェックボックスがあり、チェックすると、ユーザーがその行を印刷されたテーブルに含めることを希望していることを示します。行がチェックされると、JQueryは印刷クラスを：に追加します。

$("td .checkbox").click(function(e){
    if (this.checked) {
        $("#tr-"+this.id).addClass("print");
    } else {
        $("#tr-"+this.id).removeClass("print");
    }
});

編集：HTMLを追加して、以下の回答のIDとクラスを表示します...

<tr id="tr-print-0" class="search-line-item-0 print">
    <td>data</td>
    <td>data...</td>
    <td><input type="checkbox" id="print-0" name="print-0"></td>
</tr>
<tr id="tr-print-1" class="search-line-item-1">...
<tr id="tr-print-2" class="search-line-item-0">...

次に、CSSファイルに@media print {}があり、行の表示をnoneまたはblockに設定します。

tr.search-line-item-0, tr.search-line-item-1 {
    display: none;
}

tr.search-line-item-0.print, tr.search-line-item-1.print {
    display: block;
}

問題は、ページを印刷すると、display：blockのある行のみが表示されることです。これは意図した動作ですが、各行が最初の列の内側にレンダリングされているように見えます（最初の行はに<th>またがり<tr>、他<th>のすべての行はそれらの下には何もありません）。これまでのところ、ChromeとFirefoxでのみテストされており、問題は両方のブラウザで同じです。

目標は、他のウィンドウを開いたり、iframeを使用したりせずに、行をすばやくチェックして印刷する方法を用意することです。したがって、誰かがうまくいく代替ソリューションを知っているなら:)

4

2 に答える 2

2

完了したセレクターは、CSSとJavascriptの間で一致します。JavaScriptではIDで行を呼び出し、CSSではクラスで行を表示しています。

$("td .checkbox").click(function(e){
   var $row = $("tr.search-line-item-"+this.id);
   if (this.checked) {
      $row.addClass("print");
   } else {
      $row.removeClass("print");
   }
});
于 2012-08-28T01:53:42.287 に答える
1

を設定する代わりに、テーブルの行として通常のレンダリングを取得するようdisplay: blockに設定します。display: table-row

于 2012-08-28T16:30:29.397 に答える