javascript - jQuery:隐藏包含 ul + print 的子 td 的 tr？

Question

我有一个<table>其中某些<td>包含<ul>我希望当单击特定按钮时会发生两件事:

1. 家长 <tr> child <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();
}

Answer 1

我看到的第一个问题是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);
})

Demo