What's the easiest way to format web-based data by content, CSS, Javascript, or other method?
Question
I currently have this HTML:
<html> <head> <title>IN Print ALL</title> <link rel="shortcut icon" href="\\\\MyServer\\Webcaster\\favicon.ico" /> <style type='text/css'> caption { background-color:333BFF; color:white; border-style:solid; border-width:1px; border-color:336699; text-align:center; } table { font-family:Tahoma; border-collapse:collapse; font-size:15pt; width:85%; border-style:solid; border-color:white; border-width:1px; } th { font-size:10pt; color:black; text-align:center; font-weight:bold; } tbody tr:nth-child(odd) { background: #eee; } tr { } td { font-size:10pt; color:black; border-style:solid; border-width:1px; border-color:cccccc; text-align:left; padding:3px; } </style> <meta http-equiv="refresh" content="30" /> </head> <tbody> <table align="center"> <caption> On The Floor Printing IN ALL as of {%Current Date Time%} </caption> <thead> <tr> <th>Cycle Code</th> <th>Product</th> <th>Description</th> <th>Warehouse</th> <th>Production Due Date</th> <th>Status</th> <th>Status Comment</th> <th>Sales Order Number</th> <th>Job Description</th> <th>Ship Expire Date</th> <th>Days Until Due</th> <th>Total Hours</th> <th>Remaining Sch Hrs</th> <th>Sch Hrs</th> <th>Rev Budget Hrs</th> </tr> </thead> <tbody> {BEGIN*REPEAT} <tr> <td>{UDF_CYCLE}</td> <td>{Product}</td> <td>{Description}</td> <td>{WarehouseCode}</td> <td>{ProductionDueDate}</td> <td>{StatusCode}</td> <td>{CurrentStatusComment}</td> <td>{SalesOrderNo}</td> <td>{UDF_JOBDESC}</td> <td>{ShipExpireDate}</td> <td>{daystilldue}</td> <td>{TotalHours}</td> <td>{RemainingScheduledHours}</td> <td>{ScheduledHours}</td> <td>{RevisedBudgetHours}</td> </tr> {END*REPEAT} </tbody> </table> </body> </html>
It creates a nice table that displays the data. What I'm wanting is for any record that has a {daystilldue} < 1 to display in a red font. I've been looking at a JavaScript IF statement, but I haven't been able to get it to work. I'd appreciate any ideas or incites on the best way to do this.
1 answers
solution1
0 ACCPTED 2017-11-06 15:36:17
Having thought a bit further, you can actually do this with a small modification to your HTML - using data attributes, and a selector looking for the right thing. In this case, it looks for a value of "0" or anything starting with "-" , ie negative numbers. In the example below I've cut down the table to just a few columns and added a few rows to show how the template might expand in certain scenarios.
I've put an inner span in this td , as altering the color of a td also affects its borders.
span[data-daystilldue="0"], /* anything that's 0 */ span[data-daystilldue^="-"] { /* or anything starting with -, ie negative numbers */ color:red; } table { font-family: Tahoma; border-collapse: collapse; font-size: 15pt; width: 85%; border-style: solid; border-color: white; border-width: 1px; } td { font-size: 10pt; color: black; border-style: solid; border-width: 1px; border-color: cccccc; text-align: left; padding: 3px; }
<table align="center"> <thead> <tr> <th>Cycle Code</th> <th>Product</th> <th>Days Until Due</th> </tr> </thead> <tbody> {BEGIN*REPEAT} <tr> <td>{UDF_CYCLE}</td> <td>{Product}</td> <td><span data-daystilldue="{daystilldue}">{daystilldue}</span></td> </tr> <tr> <td>{UDF_CYCLE}</td> <td>Example 1</td> <td><span data-daystilldue="1">1</span></td> </tr> <tr> <td>{UDF_CYCLE}</td> <td>Example 2</td> <td><span data-daystilldue="0">0</span></td> </tr> <tr> <td>{UDF_CYCLE}</td> <td>Example 3</td> <td><span data-daystilldue="-1">-1</span></td> </tr> <tr> <td>{UDF_CYCLE}</td> <td>Example 4</td> <td><span data-daystilldue="-20">-20</span></td> </tr> {END*REPEAT} </tbody> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.