jQuery：隐藏包含ul + print的子td的tr？

Question

我有一个<table> ，其中某些<td>包含<ul> ，当我点击一个特定的按钮时，我想要它，有两件事情发生：

1. 父<tr>儿童<td>包含一个<ul>被隐藏
2. 执行步骤1后打印窗口，以便在打印的纸张上隐藏包含<ul> <tr>

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();
}

Answer 1

我看到的第一个问题是line 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)"是防止默认链接操作的一种方法，或者，在click事件中你可以调用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);
})

演示

Answer 2

只需为Print media定义特定的CSS，您就可以获得相同的结果：

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

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