如何在每个手风琴上插入打印按钮？ [复制]

Posted 2023-02-21

【中文标题】如何在每个手风琴上插入打印按钮？ [复制]

【英文标题】：How can i insert print button on each accordion? [duplicate]

【发布时间】：2015-12-12 07:03:09

【问题描述】：

所以我在我的 php 网页上创建了多个手风琴。我想在它们每个上都有一个打印按钮，以便用户可以按我的格式打印出来。代码如下：

PHP：

for($i=0; $i<$length; $i++) //Length is usually between 3-6
  
  echo "<div id='nestedAccordion'>";
     echo "<h2><table><thead></thead>";
     echo "<tr><td>". $data[$i][0] . "</td>";
     echo "</tr><tr><td>" . $data[$i][1] . "<td>";
     echo "</tr>";
     echo "</table>";
     echo "</h2>";
         echo "<div>";
             echo "<h3>Subcategory1</h3>" // Couple sub category
         echo "</div>";

     echo "<div id='printableArea'>";
         echo "<p>AD: ".$data[$i][0]."</p>";
         echo "<p>Descripton: ".$data[$i][1]."</p>";
     echo "</div>";
     echo "<input style='float: right' type='button' onclick="."printDiv('printableArea')"." value='Print' />"; 
 

javascript：

$(document).ready(function () 
    var parentDivs = $('#nestedAccordion div'),
        childDivs = $('#nestedAccordion h3').siblings('div');

    $('#nestedAccordion h2').click(function () 
        parentDivs.slideUp();
        if ($(this).next().is(':hidden')) 
            $(this).next().slideDown();
         else 
            $(this).next().slideUp();
        
    );

    $('#nestedAccordion h3').click(function () 
        childDivs.slideUp();
        if ($(this).next().is(':hidden')) 
            $(this).next().slideDown();
         else 
            $(this).next().slideUp();
        
    );
);
function printDiv(divName) 
     var printContents = document.getElementById(divName).innerhtml;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;

CSS：

#printableArea
    display: none

此代码有效，因为我在每个手风琴上都有打印按钮。但是当我单击任何打印按钮时，打印预览打开，数据仅来自第一个手风琴。我该如何解决这个问题，所以打印按钮只有手风琴的数据。

【问题讨论】：

您必须有唯一的 id：<div id='printableArea'> 或使用类名并使用 this

^ 所以因为它在一个循环中，可能会将数字附加到 div id

另外echo "<input ...onclick="."printDiv(... 并没有按照你的想法做。应该是echo "<input ...onclick=\"printDiv(...

@developerwjk 将数字附加到 div 是什么意思？对不起，业余爱好者。

喜欢echo "<div id='printableArea" . $i . "'>"; 和echo "<input style='float: right' type='button' onclick=\"printDiv('printableArea" . $i . "')\" value='Print' />";

【参考方案1】：

使用window.print() 打印窗口，因此它不会针对您的手风琴。

试试这个插件printElement()。