【问题标题】:Set HTML table cell background colour according to text content根据文本内容设置 HTML 表格单元格背景颜色
【发布时间】:2018-12-04 15:12:50
【问题描述】:

我编写了一个 Perl 程序来创建一个网页,其中包含一个从文本文件 textfile.txt 派生的 HTML 表格。

我想更改它,以便表格的单元格根据文本内容着色。例如,如果文本是Reject,那么单元格的背景应该是红色的。

这是我尝试过的两种方法。他们都没有工作

方法一

if ( $_ eq "REJECT" ) {
    print map { "<td style=width:705 bgcolor=#FF0000 >REJECT</td>" } @$d;
}

方法二

foreach my $d ( @data ) {

    $d //= '';    # Convert undefined values to empty strings

    my $class;

    if ( $d eq 'REJECT' ) {
        $class = 'hilite';
    }

    $html .= '<td';
    $html .= " class='$class'" if $class;
    $html .= ">$d</td>";
}

Perl 程序

#!/usr/bin/perl

print "Content-type: text/html\n\n";

use strict;
use warnings;

my $output = `cat textfile.txt`;
my @lines = split /\n/, $output;

my @data;

foreach my $line ( @lines ) {
    chomp $line;
    my @d = split /\s+/, $line;
    push @data, \@d;
}

my $color1 = "black";
my $color2 = "darkgreen";
my $color3 = "black";
my $color4 = "red";
my $color5 = "lime";

my $num    = 6;
my $title  = "This is the heading";
my $fstyle = "Helvetica";

print "<body bgcolor = $color3>";
print "<font color = $color5  face = $fstyle  size = $num>$title</font><br />";

foreach my $d ( @data ) {

    print "<html>";
    print "<body>";
    print "<table style=table-layout= fixed width= 705 height=110 text = $color4 border = 2 bordercolor = $color1 bgcolor = $color2>";
    print "<tr>";
    print map {"<th style=width:705 >Column1</th>"}
            print map {"<th style=width:705 >Column2</th>"}
            print "</tr>";
    print "<tr>";
    print map {"<td style=width:705 >$_</td>"} @$d;

    if ( $d eq 'REJECT' ) {
        print map {"<td style=width:705 bgcolor=#FF0000 >Reject</td>"} @$d;
    }

    print "</tr>";
    print "</table>";
    print "</body>";
    print "</html>";
}

输入文本文件:

Column1 Column2
Accept   Reject
Accept   Reject
Accept   Reject

这一行

print map { "<td style=width:705 bgcolor=#FF0000 >Reject</td>"

正在向单元格添加背景颜色 RED,但它与条件 Reject 不匹配。

输出

【问题讨论】:

  • 为什么map { ... }&lt;th&gt; 字符串周围?您已经清楚地发现有问题是因为您发现如果以分号结束语句将不起作用。你不能盲目地复制别人的代码而不了解它的作用。你所写的将首先打印Column2,然后是Column1
  • "这一行正在为单元格添加背景颜色 RED,但它与条件 Reject 不匹配" 这是什么意思?所有行都包含Reject,并且都显示为红色。这就是你所要求的。
  • 抱歉给您带来了困惑。我也附上了脚本的输出。这个 Perl 脚本将 textfile.txt 作为输入,并以 html 表格格式打印其内容,如上所示。我只需要将输出中的 Reject 单元格更改为 RED。也就是说,如果表格单元格值为 Reject,则将该单元格的背景打印为 RED。上面的代码是一种 POC,我也用通用术语替换了实际值,但要求是一样的。是的,我从网络上获取了部分代码,因为我对 perl 脚本非常陌生,并且尽我所能去学习。
  • “是的,我从 web 获取了部分代码,因为我对 perl 脚本非常陌生,并且尽我所能去学习”互联网没有努力学习。您已经使用map { ... } 好几天了,没有正当理由。我再说一遍,你绝不能在不了解它的作用和工作原理的情况下简单地复制别人的代码。鉴于我的警告,我希望您至少阅读map 上的 Perl 文档。现在就去做吧。
  • 我不知道您认为通过从您的问题中删除 Perl 代码所做的改进。我已经把它放回去了。

标签: html css perl html-table


【解决方案1】:

以下是您的 Perl 代码中的一些错误

  • 正如我所说,你在滥用map

  • 您正在为@data 的每个元素创建一个新的 HTML 文档。您希望浏览器如何处理多个 &lt;html&gt; 元素?无法全部显示

  • 您希望字符串 REJECT 匹配 Reject

  • 您正在混合使用 CSS style 字符串和元素属性。比如

    print "<table style=table-layout= fixed width= 705 height=110 text = $color4 border = 2 bordercolor = $color1 bgcolor = $color2>"
    

    应该是

    print qq{<table
            style="table-layout:fixed; width=705; height=110; text=$color4"
            border=2
            bordercolor="$color1"
            bgcolor="$color2">\n}
    

    因为table-layoutwidthheighttext是CSS属性,而borderbordercolorbgcolor是HTML元素属性

    我认为你应该写 CSS 来解决这个问题,但那是另一回事

如果您在每个 HTML 元素后打印一个换行符 "\n" 也会对您有很大帮助。这样输出将更具可读性,您将能够更好地看到您创建的内容

请不要坚持这种“试一试,直到成功”的方法。你总是会来这里寻求帮助,让你摆脱自己造成的混乱,而且你问的不是聪明的问题。这么久后还是这样使用map 意味着你根本没有学习,你应该为自己和你的雇主正确学习语言

【讨论】:

    【解决方案2】:

    这是一个执行正确的解决方案,但它只不过是对您自己的代码的更正。我列出的问题已经解决,仅此而已

    #!/usr/bin/perl
    
    use strict;
    use warnings 'all';
    
    my $color1 = 'black';
    my $color2 = 'darkgreen';
    my $color3 = 'black';
    my $color4 = 'red';
    my $color5 = 'lime';
    
    my $size   = 6;
    my $title  = 'This is the heading';
    my $fstyle = 'Helvetica';
    
    print "Content-type: text/html\n\n";
    
    print "<body bgcolor = $color3>\n";
    print "<font color = $color5 face=$fstyle size=$size>$title</font><br />\n";
    
    {
        print "<html>\n";
        print "<body>\n";
    
        print qq{<table
                style="table-layout:fixed; width=705; height=110; text=$color4"
                border=2
                bordercolor="$color1"
                bgcolor="$color2">\n};
    
        print "<tr>\n";
        print qq{<th style="width:705" >Column1</th>};
        print qq{<th style="width:705" >Column2</th>};
        print "</tr>\n";
    
        open my $fh, '<', 'textfile.txt' or die $!;
    
        while ( <$fh> ) {
    
            my @line = split;
    
            print "<tr>\n";
    
            for ( @line ) {
    
                if ( /reject/i ) {
                    print qq{<td style=width:705 bgcolor=red>$_</td>};
                }
                else {
                    print "<td style=width:705>$_</td>"
                }
            }
    
            print "</tr>\n";
        }
    
        print "</table>\n";
        print "</body>\n";
        print "</html>\n";
    }
    

    输出

    Content-type: text/html
    
    <body bgcolor = black>
    <font color = lime face=Helvetica size=6>This is the heading</font><br />
    <html>
    <body>
    <table
            style="table-layout:fixed; width=705; height=110; text=red"
            border=2
            bordercolor="black"
            bgcolor="darkgreen">
    <tr>
    <th style="width:705" >Column1</th><th style="width:705" >Column2</th></tr>
    <tr>
    <td style=width:705>Column1</td><td style=width:705>Column2</td></tr>
    <tr>
    <td style=width:705>Accept</td><td style=width:705 bgcolor=red>Reject</td></tr>
    <tr>
    <td style=width:705>Accept</td><td style=width:705 bgcolor=red>Reject</td></tr>
    <tr>
    <td style=width:705>Accept</td><td style=width:705 bgcolor=red>Reject</td></tr>
    </table>
    </body>
    </html>
    

    外观

    我仍然对你的方法存有疑虑。将你不理解的他人工作的点点滴滴拼凑成一个程序是失败的秘诀。如果你没有兴趣去探索和学习足以靠自己生存的细节,那么你选择了错误的工作

    • 我认为您应该使用模板系统,例如 Template::Toolkit 而不是从 Perl 程序中打印 HTML

    • 应使用 CSS 和适当的class 更改颜色,而不是在行中打印 HTML 属性

    您似乎认为随意和近似的方法很好,或者至少您不愿意提供更多,但尽管其他职业可能也是如此,但软件工程需要更多的关注和精确度

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-09-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-01-01
      • 2012-06-06
      相关资源
      最近更新 更多