用HTML打印表

Question

我已经在我的网页中删除了一个表格，我想把它打印在按钮上，点击.My按钮不工作，我的代码如下所示。

<button id="button1">Print me</button>  
                        
    <table id="printTable" class="display responsive-table " style=" margin-bottom:50px; border-radius: 4px;"  >
    <thead>
    <tr >
    <th>Sl.No.</th>
    <th>Description</th>
    <th>Balance</th>
    
    </tr>
    </thead>
    <tbody>
    
    <script>
    function printData()
    {
        var divToPrint=document.getElementById("printTable");
        newWin= window.open("");
        newWin.document.write(divToPrint.outerHTML);
        newWin.print();
        newWin.close();
    }

    $('#button1').on('click',function(){
    printData();
    })
    </script>

Answer 1

如果不使用jquery，请执行以下操作：

        function printData() {
            var divToPrint = document.getElementById("printTable");
            newWin = window.open("");
            newWin.document.write(divToPrint.outerHTML);
            newWin.print();
            newWin.close();
        }

        const btn = document.getElementById("button");
        btn.addEventListener('click', () => printData())

此外，还必须关闭所有标记(表，tbody.)

Answer 2

请使用下面的代码。我已经注释掉了newWin.close()函数，所以您将看到结果。

<button id="button">Print me</button>   
                        
    <table id="printTable" class="display responsive-table " style=" margin-bottom:50px; border-radius: 4px;"  >
    <thead>
    <tr >
    <th>Sl.No.</th>
    <th>Description</th>
    <th>Balance</th>
    
    </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
    
    <script>
    function printData()
    {
      
        var divToPrint=document.getElementById("printTable");
        newWin= window.open("");
        newWin.document.write(divToPrint.outerHTML);
        newWin.document.close();
        newWin.print();
        //newWin.close();
    }

    document.querySelector("#button").addEventListener("click", function(){
      printData();
    });
    
    </script>

Answer 3

你没有关闭表标签。取而代之的是一个开头的tbody标记。