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.

Presumably you're using some sort of templating system? What sort of logic does it support, if any - that'd be the first place to look to do this. CSS itself [isn't able to do content based rules](https://stackoverflow.com/questions/1777357/css-rule-based-on-content). — James Thorpe, Nov 06 '17 at 15:16
@James Thorpe We're exporting the data out of Knowledge Sync. I'll investigate if it has any type of logic built in for formatting. Thanks — Lonnie Hull, Nov 06 '17 at 15:24
I'm not sure if you're looking for a pure JS answer wherein the style is changed directly, but probably the best way(referring to separation of concerns) would involve adding a class to your styling called(as an example) `font-red` and then apply that class with JS. Unless there's a particular reason you don't want to go that route? — zfrisch, Nov 06 '17 at 15:25
Can you confirm what precisely `{daystilldue}` will contain - ie would "I want to make it red when it's either 0 or prefixed with -" (as in -1, -2 etc) be accurate? — James Thorpe, Nov 06 '17 at 15:29

score 0 · Accepted Answer · answered Nov 06 '17 at 15:36

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>

I'll try to incorporate this today, it looks easy enough. Thanks for your time. — Lonnie Hull, Nov 06 '17 at 15:45
@Lonnie Great! I see you're new to Stack Overflow, it's worth taking a look through the [tour] page to see how it's different to the usual forum model. If you feel my answer has helped you out - you can tick the checkmark next to the voting buttons - you'll get your first bit of reputation from doing so too! — James Thorpe, Nov 06 '17 at 16:12

What's the easiest way to format web-based data by content, CSS, Javascript, or other method?

1 Answers1