Need to highlight rows based on the values of one of the cells using CSS

[HoneyBadger]

Greetings,

I am a very novice coder, just getting into web design. I’m trying to change this powershell output below into an HTML (formatted using CSS), with percentages 75-100 highlighted in red, 65-75 highlighted in Orange, and below 65 highlighted in green. However, being a beginner in CSS, I have no idea how.

Any help is greatly appreciated. I’ve also attached what I’ve used to format it already, which has formatted my HTML nicely, but it’s just a CSS I got off of google. That current CSS is here: https://codepen.io/anon/pen/yKjoBX

$ErrorActionPreference= ‘silentlycontinue’
$pc = Get-Content -Path C:\computerlist.txt
$disks = get-wmiobject –query “SELECT * from win32_logicaldisk where DriveType = 3 and NOT deviceid=’E:'” -namespace “root\CIMV2” -computername $pc
$results = foreach ($disk in $disks)
{
if ($disk.Size -gt 3)
{
$size = [math]::Round($disk.Size/1024MB, 2)
$free = [math]::Round($disk.FreeSpace/1024MB, 2)
$Used = [Math]::Round(1.00 – ($free/$size), 3)

[PSCustomObject]@{
    Servername=$disk.PSComputerName
        Drive = $disk.Name
        DriveName = $disk.VolumeName


        "Drive Size (GB)" = $size
        "Used Space (GB)" = ($size-$free).tostring("N")
        "Free Space (GB)" = $free
        "Percent Full" = ($Used).tostring("P")

    }
}

}

sample results

$results | Export-Csv -Path “C:\DiskReport.csv”
$results | Format-Table -AutoSize
$results | Export-Csv -Path “C:\ReportArchive\DiskReport.csv”
$results | convertto-html -CssUri “c:\Format.css” -Title “Server Drive Status” | out-file -filepath “C:\ReportArchive\test.html”

pause

[Beverleyh]

Hmmmm, is this a question about converting powershell script, or styling an HTML table with CSS? It’s a question that I believe a few of us might be asking, which is likely putting off many a potential helper.

If it’s the former, I’m not sure that the regular coders here will be able to assist. Our expertise lies more with web-based technologies (although there may be an overlap with common scripting/language structures). The provision of the powershell script makes it look like this is the case, but that might not be what you intend. Unfortunately, it’s presence in your post is a little confusing.

If it’s the latter, we don’t need to see any powershell. We just need to see an example (or 1 or 2 examples, if there are differing comparison cases) of the HTML that is outputted, and any relevant CSS needed to style it. You can do this using CodePen.

That being said, I feel that the regulars will mostly direct you to using JavaScript. What I see happening is that JavaScript will loop through the contents of the table cells, and set a class on those that correlate to a particular condition. Different styling can then be applied to whichever class in the stylesheet.

[HoneyBadger]

Beverley,

Thanks for the question. My particular question is about formatting a HTML output file using CSS.

I’ve linked 1 output of my script. This is with no formatting at all. I’m trying to change the Row color of a row based on the percentage in the last column.
I also relinked the CSS formatting I’m using to format that table presently.

https://codepen.io/anon/pen/KoRrdP – No formatting
https://codepen.io/anon/pen/yKjoBX – Generic Table Formatting

Going off of what you said, I wish I could use Javascript, however, according to microsoft, the only accepted formatting is with CSS, as that’s the only option the convertto-html powershell cmdlet supports.

Also, you were right, the powershell script was kind of useless unless someone here knew a way through powershell to accomplish the same.

Thanks!
Marcus

[HoneyBadger]

Beverley,

I was reading a bit more, there is an option for convertto-javascript object notation, which I might be able to get to work, I’m not entirely sure, I’ve never used it.

But it is a possibility.

[Beverleyh]

Unless you could include conditionals in the powershell script that manipulate the HTML output directly…

Example – if the last cell value is less than 65, insert green class in parent row element;

<tr class="green"><td>blah</td><td>blah</td><td>23 %</td></tr>

…I can only really suggest the JavaScript route. This is a quick fork via iPhone but it should work in other modern browsers too https://codepen.io/anon/pen/MVGZJr

Unfortunately I can only offer web-based suggestions as I know nothing about powershell.

[HoneyBadger]

https://codepen.io/anon/pen/EELGOM

I think you might be talking about something like this. I am just not sure how to replace “down” with a range of numbers in a column instead…

[HoneyBadger]

What about going about sorting the table by clicking on each header? How possible would that be?

Marcus

[Beverleyh]

Sortable http://github.hubspot.com/sortable/docs/welcome/ and Tablesort http://tristen.ca/tablesort/demo/ look quite nice.

Google “table sort JavaScript” for loads more.

[HoneyBadger]

This is perfect! Thank you!

[Author]

Posts