将 html 数据与内联脚本 html 数据追加并打印

Append html data with inline script html data and to print

本文关键字：html 数据 追加 打印 脚本      更新时间：2023-09-26

我需要在脚本中使用html附加表数据。并附加数据进行打印

但这里的表数据仅在打印模式下显示。

.html 

 <div>
    <p>Your content here</p>
    <table  id="toPrint">
     <tr>
    <td>Neil D'zousa</td>
    <td>112233445566</td>
    </tr>
</table>
</div>
<div id="notForPrint">
    <a href="#" id="print">print</a>
</div>

脚本

function open() {
 var w = window.print();
 var htmlTable2 = '<tr>' + '<th>Name</th>'
              + '<th>Phone</th>'+ '</tr>';
    var html = $("#toPrint").html();
    var t=html;
    $(t).append(htmlTable2);
    $(w.document.body).html(t);
}
$(function() {
    $("a#print").click(open);
});

如果有人知道这一点，请分享您的答案。

关于...

演示

var htmlTable2 = '<tr>' + '<th>Name</th>'
          + '<th>Phone</th>'+ '</tr>';
var html1 = $("#toPrint").append(htmlTable2);
var t=html1;
$(t).append(htmlTable2);
window.print();

试试这个。我在铬中进行了测试。它工作正常

编辑： 对你的要求的反应：你必须检查 dom[name，etc] 是否已经是 [resent]

$('#domHeader').length > 0 means already present.
if(! $('#domHeader').length)
{
 var htmlTable2 = '<tr>' + '<th>Name</th>'
          + '<th>Phone</th>'+ '</tr>';
 var html1 = $("#toPrint").prepend(htmlTable2); //peter is correct
 //var t=html1;
 //$(t).append(htmlTable2);
}

编辑演示

更新最终版

以下应该可以做到。标题应位于顶部：

function open() {
     var htmlTable2 = '<tr><th>Name</th><th>Phone</th></tr>';
     var html1 = $("#toPrint").prepend( htmlTable2 );
     window.print(); 
}

其余代码应该可以正常工作。

相关文章：