如何從選定的html中刪除節點，而不從當前頁面中刪除它？

我正在使用jquery從我的頁面抓取HTML並在新窗口中打開它來打印。我必須自定義一些樣式，以便格式化在打印時適用。我在我的主頁上有一個表格，它有<colgroup>來定義列的寬度，但是當我打印它時，我隱藏了最後一列（因爲它有一個打印輸出時不需要的按鈕，而按鈕在打印時拋出格式化），但列的寬度仍然因colgroup而異。如果我從表格中刪除colgroup，非隱藏的列填充寬度，格式是完美的。我不知道如何刪除我的打印窗口上的colgroup節點，但不從原始窗口中刪除它（這不可能發生）。這是我的代碼打印：如何從選定的html中刪除節點，而不從當前頁面中刪除它？

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

我想從內容刪除COLGROUP，或爲newwin刪除它，但我不知道如何做到這一點。 $（「colgroup」）。remove（）會將它從原始頁面中刪除，而不是從新窗口中刪除。

來源

2015-12-22 Erica Stockwell-Alpert

而不是刪除，你可以在你的打印樣式表上隱藏它display:none。

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

來源

2015-12-22 17:47:08

這是最簡單的修復！ –

我不知道你可以做到這一點。 –

你應該做這樣的事情：

var newPage = $('#newWin'); //Or whatever the new page will be 
var content = $("#pdf-area").clone(); 

newPage.html(content.find('.colgroup').remove());

訣竅是克隆的內容，而不是抓住了原來並將其存儲在一個變量，那麼，你想在不改變原有您可以修改它。

來源

2015-12-22 17:46:56

如何從選定的html中刪除節點，而不從當前頁面中刪除它？

回答

相關問題