jquery - 隐藏@media print 的表格行

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

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

Answer 1

您的选择器在您的 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");
   }
});