The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Background Color change, Changing Background color based on column value of a HTML Report
D.Joe
post Oct 4 2018, 01:37 PM
Post #1





Group: Members
Posts: 3
Joined: 4-October 18
Member No.: 26,722



Hi , i am using the below script to convert CSV File to HTML Table (Shell Script to be used) , and change the background color of the cell of 1st column, if the value is less than 100 to RED. If the value=100 then as is else RED..Below is the script/code (suggested in one of the Forums) , however the background color remains the same (Lemon Chifon) even for the values less than 100. I am new to HTML..Any help on this will be much appreciated..

BEGIN {
print "<html><head>"
print "<title >Title </title>"
print "<style type=\"text/css\">"
print ".error {
print " color: red,"
print " font-size: larger,"
print "}"
print "</style></head>"
print "<body>"
print "<p>The report provides overall Percentage Secured in the given subjects.</p>"
print "<table border=1 bgcolor=\"LemonChiffon\" cellspacing=1 cellpadding=1>"
}

NR == 1

# Header row
print "<tr>"
print "<th><Score %></th>"
print "<th><Status></th>"
print "<th><Exam Date></th>"
print "<th><Term></th>"
print "<th><Subject></th>"
print "</tr>"
}

NR > 1 {
# Data rows
print "<tr>"
for ( i = 1; i <= NF; i++ ) {
class = $i < 100 ? "class=\"error\"" : ""
printf "<td %s>%s</td>\n", class, $i
}
print "</tr>"
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 4 2018, 02:18 PM
Post #2


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Your CSS for .error doesn't change the background color. It only changes the text color and font size. Does the text show in RED?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 4 2018, 04:05 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



This is incorrect:

QUOTE
CODE
print ".error {
print " color: red,"
print " font-size: larger,"
print "}"

(each CSS property/value pair must be separated by semicolons, not commas).

A few sidenotes:

QUOTE
CODE
BEGIN {
print "<html><head>"

It's good practice to use a DOCTYPE before the HTML:

CODE
BEGIN {
print "<!doctype html><html><head>"

(without this browsers emulate bugs from older versions).

QUOTE
CODE
print "<table border=1 bgcolor=\"LemonChiffon\" cellspacing=1 cellpadding=1>"

It's more practical to only use CSS for decorations, i.e. not mix in older presentational HTML attributes like the above.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
D.Joe
post Oct 4 2018, 08:19 PM
Post #4





Group: Members
Posts: 3
Joined: 4-October 18
Member No.: 26,722




@Charles , No the text color remains the same. it doesn't change... Style attrributes are not getting called i guess . Font/Color/BG-Color everything remains the same..Nothing changes... ohmy.gif ..Banging my head..
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 4 2018, 10:28 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Christian told you. The delimiter between property-value pairs should be a semicolon. Not a comma as you have it. Lite this.

CODE
print ".error {
print " color: red;"
print " font-size: larger;"
print "}"


It still won't change the background, because you haven't defined a background color.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
D.Joe
post Oct 5 2018, 01:46 PM
Post #6





Group: Members
Posts: 3
Joined: 4-October 18
Member No.: 26,722



Thank you so much Christian & Charles.
Christian was right by inserting the correct Background property and <Value> and by replacing the comma with semi colon has done the trick. I am now able to generate the Background color. Thank you once again to both
Lastly one small doubt, how to centre-allign the following Header. It should come on top of the Column headers and centre allign.

print "</p>"report provides overall Percentage Secured in the given subjects"</p>"

Thanks alot...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 5 2018, 02:19 PM
Post #7


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



That's right - just forget about me. IPB Image tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 7 2018, 04:51 PM
Post #8


.
********

Group: WDG Moderators
Posts: 9,628
Joined: 10-August 06
Member No.: 7



QUOTE(D.Joe @ Oct 5 2018, 08:46 PM) *

Thank you once again to both

You're welcome!

QUOTE
Lastly one small doubt, how to centre-allign the following Header. It should come on top of the Column headers and centre allign.

You could use a CAPTION element inside the table, its default styling is to be centered over the table grid. See http://www.htmlhelp.com/reference/html40/tables/caption.html

You might also use a heading element (H1, H2 etc) and make its text centered with CSS "text-align: center".

QUOTE
print "</p>"report provides overall Percentage Secured in the given subjects"</p>"

The above example starts with a P end tag, not a start tag, and the quote characters seem wrong...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 02:54 AM