javascript - 如何从选定的 html 中删除节点，而不将其从当前页面中删除？

Question

我正在使用 jquery 从我的页面中获取 HTML 并在新窗口中打开它进行打印。我必须自定义一些样式，以便在打印时格式有效。我的主页上有一个表格，其中包含 <colgroup>定义列的宽度，但是当我打印它时，我隐藏了最后一列(因为它有一个打印输出不需要的按钮，并且打印时按钮会丢弃格式)，但是宽度由于 colgroup，列的保留。如果我从表中删除 colgroup，非隐藏列将填充宽度并且格式是完美的。我不知道如何删除我的打印窗口上的 colgroup 节点，而不是从原始窗口中删除它(这是不可能发生的)。这是我的打印代码:

var newWin;

function printDetails() {
    var content = $("#pdf-area").html();
    var host = window.location.protocol + "//" + window.location.host;
    var cssFiles = [
        host + "/Themes/MSD/Styles/template/ma-order-details-2.css",
        host + "/Scripts/libraries/zurb-responsive-tables/0.0.0/responsive-tables.css",
        host + "/Themes/MSD/Styles/template/checkout-cart-2.css",
        host + "/Themes/MSD/Styles/msdtheme.css",
        host + "/Themes/MSD/Styles/foundation.css",
        host + "/Themes/MSD/Styles/base.css",
        host + "/Themes/MSD/Styles/print.css"
    ];
    newWin = window.open();    
    cssFiles.forEach(function (file) {
        newWin.document.write('<link rel="stylesheet" href="' + file + '" type="text/css" />');
    });
    newWin.document.write("<span class='please-wait'>Please wait...</span>");
    newWin.document.write("<div class='ma-order-details-2'>");
    newWin.document.write(content);
    newWin.document.write("</div>");
    newWin.document.close();
    newWin.focus();
    setTimeout(function () {
        newWin.print();
        newWin.close();
    }, 1000);   
}

我想从 content 中删除 colgroup，或者从 newWin 中删除它，但我不知道该怎么做。 $("colgroup").remove() 将从原始页面中删除它，而不是从新窗口中删除它。

Answer 1

您可以在打印样式表上使用 display:none 隐藏它，而不是删除它。

@media print {
    ...
    .colgroup {
         display:none;
    }
}