使用javascript将父div传递给弹出div

发布于 2024-11-27 04:52:57 字数 842 浏览 3 评论 0原文

我正在为客户设计一个页面，我在一个名为“areaToPrint”的 div 中有一个数据库表，我想以某种方式打印它，并且我希望能够对表进行 CSS 格式化。基本思想是使用 javascript 将 'areaToPrint'.innerhtml 发送到我的 css 格式文件 Printer.php 中名为 'printer' 的 div。

//我在主页面/父页面中的脚本

<script>
function printDiv()
{
var divToPrint=document.getElementById('areaToPrint');
var newWin = window.open("printer.php");
newWin.document.getElementById('printer').innerHTML=divToPrint.innerHTML;
newWin.print();
newWin.close();
}
</script>

//Printer.php 中的 body 元素

<body>
<div id="printer"></div>
</body>

我希望areaToPrint 的内容填充弹出的printer.php 中的打印机div。我能够使用类似的东西来完成类似的任务

newWin.document.write(divToPrint.outerHTML)

，但我希望能够对 div 内的表格进行 css 格式化。（通过链接调用 javascript）

关于 javascript 错误有什么建议吗？

原文

I'm designing a page for a client and I have a database table inside a div called 'areaToPrint' that I want to print in some way, and I want to be able to css format the table. The basic idea is to use javascript to send the 'areaToPrint'.innerhtml to a div called 'printer' inside my css formated file printer.php.

//My script in the main/parent page

<script>
function printDiv()
{
var divToPrint=document.getElementById('areaToPrint');
var newWin = window.open("printer.php");
newWin.document.getElementById('printer').innerHTML=divToPrint.innerHTML;
newWin.print();
newWin.close();
}
</script>

//body element inside Printer.php

<body>
<div id="printer"></div>
</body>

I want the content of areaToPrint to fill the printer div in the popuped printer.php.
I was able to do a similar task using something like

newWin.document.write(divToPrint.outerHTML)

But i want to be able to css format the table inside the div.
(The javascript is called with a link)

Any suggestions on javascript faulties?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

奈何桥上唱咆哮 2024-12-04 04:52:58

也许 jQuery 会有所帮助

$(this).parent()
$("someone").css()
$("someone").addClass()

Maybe jQuery would be helpful with

$(this).parent()
$("someone").css()
$("someone").addClass()

回复收藏 0 原文

等往事风中吹 2024-12-04 04:52:58

除非您想使用 JavaScript 动态设置表格格式（例如，根据交互更改视觉样式），否则最简单的方法是在 Printer.php 视图模板中包含样式表。

例如

<html>
    <head>
        <link rel="text/css" media="print" href="css/print.css" />
    </head>
    <body>
        <div id="printer"></div>
    </body>
<html>

Unless you want to dynamically format the table with JavaScript ( e.g. change visual styles based on interaction), the easiest way would be to include a stylesheet in your printer.php view template.

e.g.

<html>
    <head>
        <link rel="text/css" media="print" href="css/print.css" />
    </head>
    <body>
        <div id="printer"></div>
    </body>
<html>

回复收藏 0 原文

~没有更多了~