Question

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

包含<tr>的子<td>的父<ul>隐藏
执行第1步后打印窗口，以便在打印的工作表中隐藏<tr> <ul>

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")，它通常会返回所有表行，并根据返回的信息过滤结果对象真正。
- 虽然$('#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

Answer 2

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

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

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

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

2 个答案:

也可以写成：

Demo