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 {}，它将行的显示设置为none或阻止。

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 show up，这是预期的行为，但看起来每行都在第一列内部呈现（第一个<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");
   }
});

Answer 2

不是设置display: block，而是设置display: table-row以将正常呈现作为表格的一行。

隐藏@media打印的表格行

2 个答案: