如何打印动态元素

时间:2017-07-12 16:42:46

标签: javascript jquery html json

我有一个html页面,它接受4个值作为输入,使用getJSON()加载json文件,在json文件中搜索这些输入,并在initiall empty元素中返回结果。

我得到一张桌子作为结果,我想打印那张桌子。我正在使用window.print()函数进行打印,但它正在打印一个空页面,因此必须是动态生成表的问题。我不知道如何打印动态表。

感谢任何帮助。谢谢.. :)

这是带打印脚本的html代码。



<script>
$(document).on('click',"#print",function(){
        var originalContents = $("body").html();
        var printContents = $("#printThisTable").html();
        $("body").html(printContents);
        window.print();
        $("body").html(originalContents);
        return false;
});
</script>
&#13;
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap 101 Template</title>


<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">


</head>
<body>
<p><br/><br/></p>
<div class="container">
    <div class="col-md-5"><input type="search" class="form-control" id="search1" placeholder="EQPT" />
        <ul class="list-group" id="result"></ul>
    </div>
    <div class="col-md-5"><input type="search" class="form-control" id="search2" placeholder="UNIT" /></div>
    <div class="col-md-5"><input type="search" class="form-control" id="search3" placeholder="CORPS" /></div>
    <div class="col-md-5"><input type="search" class="form-control" id="search4" placeholder="COMD" /></div>
    <div class="col-md-3"><button type="button" id="search" class="btn btn-info">Search</button></div>
    <div class="col-md-3"><button type="button" id="print" class="btn glyphicon glyphicon-print"> PrintTable</button></div>
    <br/>
    <br/>
    <br/>
    <table class="table table-striped table-bordered table-hover col-md-26">
        <thead>
            <tr>
                <th>REPAIR CLASS</th>
                <th>PROD YR</th>
                <th>EQPT</th>
                <th>QTY</th>
                <th>REGD NO</th>
                <th>WO NO</th>
                <th>WO DATE</th>
                <th>UNIT</th>
                <th>CORPS</th>
                <th>COMD</th>
                <th>JOB NO</th>
                <th>JOB DATE</th>
                <th>STATUS</th>
                <th>WCN NO</th>
                <th>WCN DATE</th>
                <th>COLLECTION DATE</th>
            </tr>
        </thead>
        <div id="printThisTable">
        <tbody>

        </tbody>
    </div>
    </table>


  <script src="jquery-3.2.1.min.js"></script>

  <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  
  </body>
  </html>
&#13;
&#13;
&#13;

0 个答案:

没有答案