隐藏包含ul + print的子td的tr

jQuery: Hide tr of child td that contains ul + print?

本文关键字：td tr 的子 print 包含 ul 隐藏      更新时间：2023-09-26

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

  1. 包含<ul>的<td>的父<tr>被隐藏
  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();
}

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

为打印媒体定义特定的CSS也可以达到同样的效果:

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

(只是一个小例子，适应您的具体需求)

相关文章：