如何遍历所有引导选项卡并在单击按钮上打印内容

Question

How to iterate through all the bootstrap tabs and print contents (not only the one for the active tag , but the inactive ones too) on click of a Print button present in any of the tabs . 如何在单击任何选项卡中的“ Print按钮时遍历所有引导选项卡并打印内容（不仅是活动标签的内容，而且还是非活动标签）。 Each tab has dynamically inserted content . 每个标签都有动态插入的内容 。 Tried some suggested css changes I found in related SO solutions. 尝试了我在相关SO解决方案中发现的一些建议的css变化。 Those did not work for me. 那些对我不起作用。

onclick function for my print button is here 我的打印按钮的onclick功能就在这里

function printMe() {
  var theWork = window.open('', 'PrintWindow');
  var tabs_html = "<html><head><title>Print</title>";
  tabs_html += "<style>body { padding: 15px; }</style></head>";
  $(".tabs").each(function() {
    $(this).find(".nav-tabs li").each(function(index, element) {
      tabs_html += "<h2>" + $(this).text() + "</h2><br/>";
      tabs_html += $(".tab-content .tab-pane").eq(index).html() + "<br/><br/>";
    });
    $(this).after(tabs_html + "</body></html>");
  });
    theWork.document.open();
    theWork.document.write(tabs_html);
    theWork.document.close();
    theWork.print();
}

Fiddle 小提琴

Answer 1

There are two issues with your code. 您的代码有两个问题。

You are appending the closing body and html tags inside the each loop. 您将在each循环中追加结束body和html标记。
You are selecting the elements with the class tabs . 您正在使用类tabs选择元素。 But there seems to be no such element in the provided DOM/ Fiddle. 但是在提供的DOM / Fiddle中似乎没有这样的元素。

I have fixed the above two issues by 1. Moving the closing body and html tags out of the loop, and 2. Replacing the .class selector with an #id selector, and voila! 我已经修复了上述两个问题1.将结束body和html标签移出循环，然后2.用#id选择器替换.class选择器，瞧！ it works. 有用。

DEMO DEMO

如何遍历所有引导选项卡并在单击按钮上打印内容

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-11 13:01:40

如何遍历所有引导选项卡并在单击按钮上打印内容

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-11 13:01:40

解决方案1
0 已采纳 2016-07-11 13:01:40