Javascript 修改html并在弹出窗口中打开它

以下是我试图实现的目标：

• 从当前页面抓取一些html
• 准备新的html内容（例如，将所有

  tr

  替换为

  ul

  ，将所有

  td

  替换为

  li

  ）
• 在弹出窗口中打开新构建的html（

  窗口。打开

  ）
• 确保页面上现有的html保持不变

其主要目的是利用现有内容创建一个更便于打印的窗口，并自动触发浏览器打印按钮

以下是我迄今为止所做的工作。有没有一种在jQuery中编写此代码的替代方法，使我能够以某些元素/类/ID为目标，而不仅仅是用其他标记替换标记

<script>
$('#print-it').on('click', function(){
  var w = window.open('','','width=1100, height=600, scrollbars=1');
  var content = $('.my-div').html();

  content = content.replace('table', 'div');
  content = content.replace('thead', 'div');
  content = content.replace('tbody', 'div');
  content = content.replace('tr', 'ul');
  content = content.replace('td', 'li');

  var html = '<div class="popup">' + content + '</div>';
  w.document.write(html);
  w.document.close();
  w.focus();
  w.print();
  return false;
});
</script>

<div class="my-div">
  <table class="my-table">
    <thead>
      <tr>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <table>
            <tr>
              <td>Data</td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<a id="print-it" href="#">Print Me</a>

$（“#打印它”）。在（'click'，function（）上{
var w=窗口打开（“”，，“宽度=1100，高度=600，滚动条=1’）；
var content=$（'.my div'）.html（）；
content=content.replace（'table'，'div'）；
content=content.replace（'thead'，'div'）；
content=content.replace（'tbody'，'div'）；
内容=内容。替换（'tr'，'ul'）；
content=content.replace（'td'，'li'）；
var html=''+内容+''；
w、 document.write（html）；
w、 document.close（）；
w、 焦点（）；
w、 打印（）；
返回false；
});
标题
资料

我运行了您的代码片段（在添加jQuery并将脚本打包后。准备启动按钮）。该文件将按书面形式替换工作。在弹出窗口中没有表格元素（您可以在弹出窗口中注释掉打印内容，然后检查元素来查看）。我不知道你期望什么样的布局，但我认为你需要改变你的逻辑或添加一些CSS来实现它。一个预期布局的示例将更容易提供帮助

您可能想看看这个，谢谢，但我知道如何在弹出窗口中插入html。我的问题不同。我在构建新的html时遇到了问题。我修改了这个问题以便更清楚。你能发布要修改的html吗？@Ece刚刚发布了它。你真正应该做的是提供一个打印样式表，如

，它改变

显示：

表格、tr、td等的样式，或者在现有CSS中使用

@media print

。我偶然发现的第一篇文章：谢谢。是的，看起来它真的很管用。我更希望我能想出一个更好的方法，这样我就可以更好地控制html了。也许在jQuery中使用find和replaceWidth可以做更多的工作，这样我就可以针对特定的类和元素，只针对常规表标记。另一个可能的（也是我更好的解决方案）是使用

@media print{style HERE}

编写CSS，这样你就不必手动处理html了。我这样做是为了解决类似的页面打印问题。奇怪的是，效果相当不错。