1. 首頁
  2. 問答
  3. 用perl創建html

用perl創建html

2012-04-25 63 views
0 
<header> 
<script type="text/javascript"> 
function hideit() 
{ 

var x1 = document.getElementsByTagName("ol").item(0); 
var x = document.getElementsByTagName("ol"); 
for (var i = 0; i < x.length; i++) 
    x[i].style.display="none"; 
} 
function showit() 
{ 
var x1 = document.getElementsByTagName("ol").item(0); 

var x=document.getElementsByTagName("ol"); 
for (var i = 0; i < x.length; i++) 
x[i].style.display=""; 
} 
</script><header> 
<body> 
foreach $key (keys %{$stats_data{$out}}) { 

    print $indexfd ("<input onclick=\"showit()\" type=\"button\" id=\"<?perl echo  $key; ?>\" value=\"showit\"><br><input onclick=\"hideit()\" type=\"button\" id=\"<?perl echo $key; ?>\" value=\"hideit\"><br><b><ol id=$key>$stats_data{$out}{$key}<ol id=$key> </b><br>"); 
     }</body>

我正在用perl創建一個html文檔。我爲每個perl變量編寫了一個事件mouseover和mouseout（通過循環）。但看起來事件同時控制着所有的變量。我怎麼只寫一次事件，但使它可以單獨申請每個項目：這是我目前用perl創建html

但這個html顯示時，不讓我控制事件分別爲每個$key。

即使按鈕確實爲每個$鍵創建，點擊其中一個，控制着所有的$stats_data{$out}{$key}。

我甚至嘗試將ID傳遞給顯示/隱藏腳本，但沒有運氣。

來源

2012-04-25 torauser1354951

+0

這是早上有點早，但我不明白你的代碼。你是否將perl代碼嵌入到常規的html文件中？你檢查了結果，以確保它看起來像有效的HTML和JavaScript？ – flesk 2012-04-25 05:43:10

+0

我想以一種乾淨的方式顯示我的模擬結果，因此創建一個html文檔。由於結果以不同類型的文件形式分佈在不同的目錄中。它涉及解析來自文件等的信息，所以我正在編寫一個perl腳本來解析文件中的這些信息並創建一個html。我正在循環打印每個圖像的信息。 – torauser1354951 2012-04-25 18:23:19

回答

7

您的代碼看起來像您試圖將Perl與HTML混合在一起，您將使用PHP。 這在Perl中不起作用。

我試着先修復你的Perl代碼。這將打印到您的文件句柄（我省略），但不會給你工作的JavaScript代碼。我沒有改變，因爲我不明白你想做什麼。稍後更多。

use strict; 
use warnings; 
# open of $indexfd filehandle goes here.. 

# print head of HTML page 
print $indexfd <<HTML 
<html> 
    <header> 
    <script type="text/javascript"> 
    function hideit() { 
     var x1 = document.getElementsByTagName("ol").item(0); 
     var x = document.getElementsByTagName("ol"); 
     for (var i = 0; i < x.length; i++) 
     x[i].style.display="none"; 
    } 
    function showit() { 
     var x1 = document.getElementsByTagName("ol").item(0); 
     var x=document.getElementsByTagName("ol"); 
     for (var i = 0; i < x.length; i++) 
     x[i].style.display=""; 
    } 
    </script> 
    </header> 
    <body> 
HTML 
; 

# If I see this correctly, %stats_data looks like this: 
my %stats_data = (
    'out1' => { 
    'key1' => 'val1', 
    'key2' => 'val2', 
    }, 
    'out2' => { 
    'key1' => 'val1', 
    'key2' => 'val2', 
    }, 
); 
my $out = 'out1'; # you need the $out from somewhere 
# print buttons for each data thingy - you'll want to sort them probably 
foreach my $key (sort keys %{$stats_data{$out}}) { 
    print $indexfd 
    qq~<input onclick="showit()" type="button" id="$key" value="showit"><br />~, 
    qq~<input onclick="hideit()" type="button" id="$key" value="hideit"><br/>~, 
    # Because $stats_data{$out} is a hash ref you need the -> operator here 
    qq~<ol id="$key"><li><b>$stats_data{$out}->{$key}</b></li></ol><br/>~; 
} 

print $indexfd qq~<p>more html...</p></body></html>~;

所以有幾件事值得一提。

print $indexfd ("<input onclick=\"showit()\" type=\"button\" id=\"<?perl echo  $key; ?>\" value=\"showit\"><br><input onclick=\"hideit()\" type=\"button\" id=\"<?perl echo $key; ?>\" value=\"hideit\"><br><b><ol id=$key>$stats_data{$out}{$key}<ol id=$key> </b><br>");

在這相當長的代碼行，你用<?perl echo $key; ?>它看起來像PHP和不工作。您也使用了<ol id=$key>，因爲您使用雙引號"..."。 Perl將「-delimited」字符串中的變量替換爲它們的值，不需要類似php的東西。爲了節省您在HTML代碼中轉義所有雙引號的努力，您可以使用qq -Operator。更多相關信息請參見perlop。

我關於我的評論%stats_data數據結構解釋。

有關打印大塊的HTML，我用HERE docs。

讓我們來談談你的JavaScript現在。

即使按鈕確實爲每個$key創建，點擊其中一個，控制着所有的$stats_data{$out}{$key}。

這是因爲您設計hideit()和showit()函數的方式。我並不是真正想要達到的目標。如果你看看我的%stats_data，你會發現'out1'中有幾個鍵。這可以讓foreach循環爲每個鍵打印一組按鈕。這兩個按鈕都與它們的ID具有相同的密鑰，就像ol一樣。這是不正確的。一個id-attribute has to be unique。

此外，您的html中還存在一些基本問題，我可以自由修復。如果您打開一個<ol id="foo">容器，則需要將其關閉，如</ol>。由於<ol>是塊級元素，因此不應將內聯元素<b>置於其外部，而應放在元素的<li>元素（我省略）中。最好還是隻給css``style =「font-weight：bold」分配給li項目，或者更好地賦予它們類。

我會對你試圖用JavaScript做什麼做最後的猜測。如果你有幾段文字，你想用按鈕隱藏它們，你可以像我這裏未經測試的代碼那樣做。

使用Javascript：

function toggle(id) { 
    if (document.getElementById(id).style.display == 'block') { 
    document.getElementById(id).style.display = 'none'; 
    } else { 
    document.getElementById(id).style.display = 'block'; 
    } 
}

HTML：

<div> 
    <input type="button" name="toggle1" id="toggle1" onclick="toggle('p1')" /> 
    <p id="p1">Lorem ipsum dolor set ... foo a lot of text 1.</p> 
    <input type="button" name="toggle2" id="toggle2" onclick="toggle('p2')" /> 
    <p id="p2">Lorem ipsum dolor set ... foo a lot of text 2.</p> 
</div>

在這種情況下，功能檢查該段是否被顯示或不顯示。顯示值需要設置爲'none'或'block'，因爲p元素是塊級元素。

如果您需要任何幫助，請嘗試發佈有關您在腳本中使用的數據的更多特定信息。

編輯： 在下面的代碼中，我改變了JS功能，以一個id（鍵）作爲參數。他們只顯示或隱藏與此密鑰關聯的列表。我改變了按鈕的ID，所以它們不一樣。我還在每一對按鈕和列表中添加了一個div，使其更清晰地表明屬於哪裏。

use strict; 
use warnings; 
# open of $indexfd filehandle goes here.. 
my $indexfd; 

# print head of HTML page 
print $indexfd <<HTML 
<html> 
    <header> 
    <script type="text/javascript"> 
    function hideit(key) { 
     document.getElementById(key).style.display = "none"; 
    } 
    function showit(key) { 
     document.getElementById(key).style.display = ""; 
    } 
    </script> 
    </header> 
    <body> 
HTML 
; 

# If I see this correctly, %stats_data looks like this: 
my %stats_data = (
    'out1' => { 
    'key1' => 'val1', 
    'key2' => 'val2', 
    }, 
    'out2' => { 
    'key1' => 'val1', 
    'key2' => 'val2', 
    }, 
); 
my $out = 'out1'; # you need the $out from somewhere 

foreach my $key (sort keys %{$stats_data{$out}}) { 
    print $indexfd 
    qq~<div id="div_$key">\n~, # Add a div around the $key-elements 
    qq~<input onclick="showit('$key')" type="button" id="btn_show_$key" value="showit">\n~, 
    qq~<input onclick="hideit('$key')" type="button" id="btn_show_$key" value="hideit"><br/>\n~, 
    qq~<ol id="$key"><li><b>$stats_data{$out}->{$key}</b></li></ol>\n~, 
    qq~</div>\n~; 
} 

print $indexfd qq~<p>more html...</p></body></html>~;

來源

2012-04-25 08:29:52 simbabque

+0

非常感謝所有的詳細解答。我實際上發佈了完整的perl腳本的快照，所以看起來有些奇怪。我很抱歉，你必須花時間糾正這一問題。我確實得到了html中的輸出。你是對的，每個out1有幾個鍵。我想打印每個out1的每個鍵，每個鍵都有一個展開合約菜單，顯示其$ stats_data {$ out} - > {$ key}。你上面的例子，我如何在out1和$ key的循環中寫入？ – torauser1354951 2012-04-25 18:34:34

+0

順便說一句，我看到你提到，創建的按鈕與其ID相同的關鍵。但事實並非如此。因爲div標籤寫在$ key的for循環中。由於我傳遞div標籤ID爲$ key並執行this.id，不應該爲每個$ key的每個按鈕創建一個單獨的控件？ – torauser1354951 2012-04-25 18:37:57

+0

我的問題是腳本的下面幾行（你寫的），即使爲每個鍵創建按鈕，我也無法單獨控制stats_data來顯示和隱藏每個鍵？如何獨立控制每個鍵的兩個show hide？foreach我的$ key（排序鍵％{$ stats_data {$ out}}）{ print $ indexfd qq〜
〜， qq〜

  1. $ stats_data {$ out} - > {$ key}

〜;; } – torauser1354951 2012-04-26 00:45:35

1

它看起來像你想要的Perl的模板模塊之一，如Template Toolkit。它允許您將Perl片段嵌入到較大的文檔中，然後處理它們，以便Perl部分填充任何您需要的內容。

下面是我的一個網站的示例。它使用包裝文件來包含頂部和底部，並讀取XML文件以獲取數據以填充中間：

[% 
     title = "The Perl Review" 
     xml  = "raw/xml/tpr_issues.xml" 
     sidebar = 1 
%] 

[% PROCESS top %] 

<table class="content-table"> 
<tr> 
     <td colspan class="2"> 

<h2>Next issue: April 15</h2> 

[% PERL %] 

use XML::Twig; 

my $twig = XML::Twig->new; 

$twig->parsefile($stash->get('xml')); 

my $root = $twig->root; 

my $latest_issue = $root->first_child('release'); 

my($volume, $issue, $year, $season) = 
     map { eval {$latest_issue->first_child($_)->text } } 
       qw(volume issue year season); 

my $articles = $latest_issue->first_child('articles'); 

print <<"TEMPLATE"; 
     <A class="cover-link" href="/Subscribers/ThePerlReview-v${volume}i${issue}.pdf"><img 
       class="cover-image-medium" height="396" width="306" 
       src="/Images/covers/v${volume}i${issue}-cover-medium.png" /></a> 
     </td> 
     <td class="article-cell"> 
     <h2 id="issue-header">Issue $volume.$issue, $season $year</h2> 

TEMPLATE 

foreach my $article ($articles->children()) 
     { 
     my @children = map { $_->tag } $article->children; 

     my %hash = 
       map { 
         $article->first_child($_)->tag, 
         $article->first_child($_)->text 
         } 
       map { $_->tag } $article->children; 

     print qq|\t<p class="article-title"><span class="article-title">$hash{title}</span>|; 
     print qq| (<a href="$hash{sample_page}">sample</a>)| if $hash{sample_page}; 
     print "<br />\n"; 
     print qq|\t\t<span class="article-author">$hash{author}</span></p>\n|;   
     } 

[% END %] 

[% PROCESS issue_note %] 

     </td> 
</tr> 

</table> 


[% PROCESS footer %]

來源

2012-04-25 15:04:24

+0

我想以更清晰的方式顯示我的模擬結果，因此創建一個html文檔。由於結果分散在不同的目錄中，涉及解析文件等信息，我正在編寫一個perl腳本來解析文件中的信息並創建一個html。你仍然推薦我使用模板？謝謝 – torauser1354951 2012-04-25 18:22:18

+1

是的，我幾乎總是推薦使用模板來創建這種輸出。 – 2012-04-26 13:29:12

相關問題

 相關問題