0

我有一个<table>特定的<td>包含<ul>，当单击特定按钮时我想要它，会发生两件事：

  1. 包含 a<tr>的子项的父项被隐藏<td><ul>
  2. 执行步骤 1 后打印窗口，使<tr>包含<ul>隐藏在打印的工作表上

http://jsfiddle.net/emturano/S9YWL/

HTML：

<table id="todo-list">
    <tr>
        <td>Entry No UL 1</td>
    </tr>
    <tr>
        <td>Entry No UL 2</td>
    </tr>
    <tr>
        <td>
            <ul>I SHOULD BE HIDDEN WHEN PRINTED</ul>
        </td>
    </tr>
    <tr>
        <td>Entry No UL 4</td>
    </tr>
</table><p>

点击打印

jQuery：

function () {
    $('#followup_a').click(followup);
});

function followup() {
    $('#todo-list tr:has(td:has(ul))').hide();
    window.print();
}
4

2 回答 2

2

我看到的第一个问题是线路function () {。那是不正确的语法。我认为你的意思是我将在我的回答中展示的文档准备方法。

从您的链接中删除onClick="window.print()"，然后将您的 JS 更改为以下内容：

$(function(){ // document . ready call
    $('#followup_a').on("click", function(e) {
        //  if href does not contain `javascript:void(0)` then use
        //  e.preventDefault(); // to prevent default link action
        $("#todo-list tr").filter(function(i) { return $(this).find("> td ul").length > 0 }).hide();
        window.print();
    });
})

这是做什么的：

  • .filter()是一个不错的 jquery 方法，它允许您调用一组 jQuery 元素，例如$("#todo-list tr")，通常会返回所有表行，并根据返回 true 的信息过滤结果对象。
    • 虽然$('#todo-list tr:has(td:has(ul))')应该做大致相同的事情
  • href="javascript:void(0)"是防止默认链接操作的一种方法，或者，在单击事件中，您可以调用event.preventDefault()

也可以写成：

function followup(e) {
    $("#todo-list tr").filter(function(i) { return $(this).find("> td ul").length > 0 }).hide();
    window.print();
}

$(function(){ // document . ready call
    $('#followup_a').on("click", followup);
})

演示

于 2013-05-08T18:21:06.193 回答
0

只需为打印媒体定义特定的 CSS，您可能会获得相同的结果：

@media print
  {
  td.noprint {display:none;}
  }

（只是一个小例子，适应您的特定需求。）

于 2013-05-08T18:18:15.483 回答