JavaScript 或 jQuery 用于以检查格式打印行条目 表的每一行应通过打印链接单独打印

标签 javascript jquery

[这是我基于 Django 的项目,我想按行打印此表,打印链接位于表中,该表以 Check 等格式打印特定行条目,请为此建议使用 JavaScript 或 Jquery]

<script>
function Print() {
  var docprint = window.open('about:blank', '_blank'); //new page
  var oTable = document.getElementById('result_tbl').rows.item(0); //get the 1st row by a selector
  docprint.document.open();
  docprint.document.write('<html><head><title>Ashley Mattresses</title>'); //write HEAD section
  docprint.document.write('</head><body><center>'); //write BODY tag and center tag for printing
  docprint.document.write(oTable.innerHTML); //select the TR's HTML and add it to the new page
  docprint.document.write('</center></body></html>'); //close BODY tag
  docprint.document.close();
  docprint.print();
  docprint.close();
}
</script>
<div id="print-content">
<b><u><h2 align="center">Duplicate Cheque</h2></b></u>
<table id="result_tbl" class="display" >
<thead>
  <tr>
    <th>S.No</th>
    <th>To_Pay</th>
    <th>Amount</th>
    <th>Amount_In_Words</th>
    <th>Cheque_No</th>
    <th>Account_No</th>
    <th>Cheque_Date</th>
    <th>Print</th>
  </tr>
</thead>
 <tbody>	
 {% for duplicate in duplicates %}
  <tr>
    <td class="sno">&nbsp;</td>
	<td>{{duplicate.topay}}</td>
	<td>{{duplicate.amount1}}</td>
	<td>{{duplicate.amount_string}}</td>
    <td>{{duplicate.chequeno}}</td>
    <td>{{duplicate.accountno}}</td>
    <td>{{duplicate.chequedate}}</td>
	<td><a href="javascript:window.print()">Print</a></td>   
  
  </tr>
 {% endfor %}
  <tbody>
</table>

最佳答案

您可以使用以下考试

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
     <style>       
        @media print {
            #result_tbl tbody tr {
                display: none;
            }

            .printRowStyle {
                display: block!important;
            }

            #result_tbl tbody tr td:first-child,#result_tbl thead tr 
             th:first-child,#result_tbl tbody tr td:last-child,#result_tbl 
            thead tr th:last-child{
                   display: none;
            }
        }
    </style>
    <script type="text/ecmascript">
        function printRow(obj) {
            $(obj).closest('tr').addClass('printRowStyle');
            window.print();
            $(obj).closest('tr').removeClass('printRowStyle');
        }
    </script>
</head>
<body>
    <table id="result_tbl" class="display">
        <thead>
            <tr>
                <th>S.No</th>
                <th>To_Pay</th>
                <th>Amount</th>
                <th>Amount_In_Words</th>
                <th>Cheque_No</th>
                <th>Account_No</th>
                <th>Cheque_Date</th>
                <th>Print</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td class="sno">&nbsp;</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td><a onclick="printRow(this)">Print</a></td>

            </tr>
            <tr>
                <td class="sno">&nbsp;</td>
                <td>2</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td><a onclick="printRow(this)">Print</a></td>

            </tr>

            <tbody>
    </table>
</body>
</html>

关于JavaScript 或 jQuery 用于以检查格式打印行条目 表的每一行应通过打印链接单独打印,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52363852/

相关文章:

jquery float Axis 标签

jquery将每个元素从选择器传递到函数,制作选择最后一个元素的数组

javascript - Ampersand.js(或 Backbone.js)中的模型可以同时存在于多个集合中吗?

jquery - CSS:随着浏览器窗口的大小逐渐增加div宽度

javascript - 删除输入字段更改时的验证错误

javascript - Vue js 2 : this. $emit 不触发

javascript - setTimeout不启动函数

Jquery 自动完成链接

javascript - 使用 angular.js 单击确认框的“确定”按钮后进行导航

javascript - 添加在 Json 对象中找到的数字