隐藏@media 打印的表格行

Question

我有一个数据表，每行都有一个复选框，选中时表示用户希望该行包含在打印的表中。检查行时，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{} 它将行的显示设置为无或块。

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> 跨越 @ 987654325@，然后所有其他 <th>s 在它们下面什么都没有）。到目前为止只在 Chrome 和 Firefox 中测试过，这两种浏览器的问题都是一样的。

目标是在不打开其他窗口或使用 iframe 的情况下快速检查行并打印它们。因此，如果有人知道也可以使用的替代解决方案:)

Answer 1

不设置display: block，而是设置display: table-row，以正常渲染为表格的一行。

Answer 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");
   }
});