我目前有这个 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>它创建了一个漂亮的表格来显示数据。我想要的是任何 {daystilldue} < 1 的记录以红色字体显示。我一直在查看 JavaScript IF 语句，但一直无法让它工作。我会很感激任何想法或煽动最好的方法来做到这一点。
最佳答案
进一步思考后，您实际上可以通过对 HTML 进行少量修改来实现此目的 - 使用数据属性和寻找正确内容的选择器。在这种情况下，它会查找 “0” 或任何以 “-” 开头的值，即负数。在下面的示例中，我将表格缩减为几列并添加了几行以显示模板在某些情况下可能如何扩展。
我在这个 td 中放置了一个内部跨度，因为改变 td 的 color 也会影响它的边框。
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>关于javascript - 通过内容、CSS、Javascript 或其他方法来格式化基于 Web 的数据的最简单方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47140111/