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

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>s 有他们下面什么都没有）。到目前为止，仅在 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 回答