如何编辑我的 HTML 代码以根据条件突出显示一行的所有单元格？

Posted 2023-03-23

技术标签:

【中文标题】如何编辑我的 HTML 代码以根据条件突出显示一行的所有单元格？【英文标题】：How to edit my HTML codes for the output to highlight all cells of a row based on a condition? 【发布时间】：2018-02-22 11:58:43 【问题描述】：

我在SQL Server 2012 中有一个Stored Procedure，它提供html 格式的输出T-SQL 查询。它工作正常，如下所示：

DECLARE @Body NVARCHAR(MAX),
        @TableHead VARCHAR(1000),
        @TableTail VARCHAR(1000)

SET @TableTail = '</table></body></html>' ;
SET @TableHead = '<html><head>' + '<style>'
    + 'td border: solid black;border-width: 1px;padding-left:5px;padding-right:5px;padding-top:1px;padding-bottom:1px;font: 11px arial '
    + '</style>' + '</head>' + '<body>' + 'This report is sent by the BI Server. Report generated on : '
    + CONVERT(VARCHAR(50), GETDATE(), 106) 
    + ' <br> <table cellpadding=0 cellspacing=0 border=0>' 
    + '<tr> <td bgcolor=#E6E6FA><b>StayYear</b></td>'
    + '<td bgcolor=#E6E6FA><b>PropertyCode</b></td>'
    + '<td bgcolor=#E6E6FA><b>Jan</b></td>'
    + '<td bgcolor=#E6E6FA><b>Feb</b></td>'
    + '<td bgcolor=#E6E6FA><b>Mar</b></td>'
    + '<td bgcolor=#E6E6FA><b>Apr</b></td>'
    + '<td bgcolor=#E6E6FA><b>May</b></td>'
    + '<td bgcolor=#E6E6FA><b>Jun</b></td>'
    + '<td bgcolor=#E6E6FA><b>Jul</b></td>'
    + '<td bgcolor=#E6E6FA><b>Aug</b></td>'
    + '<td bgcolor=#E6E6FA><b>Sep</b></td>'
    + '<td bgcolor=#E6E6FA><b>Oct</b></td>'
    + '<td bgcolor=#E6E6FA><b>Nov</b></td>'
    + '<td bgcolor=#E6E6FA><b>Dec</b></td>'
    + '<td bgcolor=#0e914b><b>Total</b></td>';

SET @Body = ( SELECT td = StayYear, '',
                        td = PropertyCode, '',
                        td = Jan, '',
                        td = Feb, '',
                        td = Mar, '',
                        td = Apr, '',
                        td = May, '',
                        td = Jun, '',
                        td = Jul, '',
                        td = Aug, '',
                        td = Sep, '',
                        td = Oct, '',
                        td = Nov, '',
                        td = Dec, '',
                        td = Total, ''
              FROM  ITB 
              ORDER BY  [PropertyCode], [StayYear] DESC

                FOR   XML RAW('tr'),
                      ELEMENTS
            ) 


SET  @Body = @TableHead + ISNULL(@Body, '') + @TableTail

SELECT  @Body

END

以下是上述查询的 HTML 输出的摘录：

<html>
<head>
<style>td border: solid black;border-width: 1px;padding-left:5px;padding-right:5px;padding-top:1px;padding-bottom:1px;font: 11px arial 
</style>
</head>
<body>Report generated on : 22 Feb 2018 <br> 
<table cellpadding=0 cellspacing=0 border=0>
<tr> 
<td bgcolor=#E6E6FA><b>StayYear</b></td>
<td bgcolor=#E6E6FA><b>PropertyCode</b></td>
<td bgcolor=#E6E6FA><b>Jan</b>
</td><td bgcolor=#E6E6FA><b>Feb</b></td>
<td bgcolor=#E6E6FA><b>Mar</b></td>
<td bgcolor=#E6E6FA><b>Apr</b></td>
<td bgcolor=#E6E6FA><b>May</b></td>
<td bgcolor=#E6E6FA><b>Jun</b></td>
<td bgcolor=#E6E6FA><b>Jul</b></td>
<td bgcolor=#E6E6FA><b>Aug</b></td>
<td bgcolor=#E6E6FA><b>Sep</b></td>
<td bgcolor=#E6E6FA><b>Oct</b></td>
<td bgcolor=#E6E6FA><b>Nov</b></td>
<td bgcolor=#E6E6FA><b>Dec</b></td>
<td bgcolor=#0e914b><b>Total</b></td>
<tr>
<td>2018</td>
<td>CDM</td>
<td>3261</td>
<td>2938</td>
<td>3054</td>
<td>2157</td>
<td>1948</td>
<td>889</td>
<td>1772</td>
<td>1620</td>
<td>872</td>
<td>1280</td>
<td>576</td>
<td>447</td>
<td>20814</td>
</tr><tr>
<td>2017</td>
<td>CDM</td>
<td>2989</td>
<td>2622</td>
<td>2484</td>
<td>1756</td>
<td>1326</td>
<td>552</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>321</td>
<td>465</td>
<td>225</td>
<td>12740</td>
</tr><tr>
<td>2018</td>
<td>EBA</td>
<td>1629</td>
<td>1494</td>
<td>1569</td>
<td>1085</td>
<td>1236</td>
<td>701</td>
<td>355</td>
<td>427</td>
<td>737</td>
<td>460</td>
<td>792</td>
<td>358</td>
<td>10843</td>
</tr><tr>
<td>2017</td>
<td>EBA</td>
<td>1778</td>
<td>1588</td>
<td>1580</td>
<td>1311</td>
<td>793</td>
<td>293</td>
<td>368</td>
<td>312</td>
<td>409</td>
<td>397</td>
<td>211</td>
<td>97</td>
<td>9137</td>
</tr><tr>
</td>
</table>
</body>
</html>

这是最终的html 输出（提取）的样子：

我想修改Stored Procedure 中的HTML 代码，以便与同一属性相关的所有行都以相同的颜色突出显示。也就是说，对于属性“CDM”，所有行都将以红色突出显示，对于所有名为“EBA”的属性，我们假设为黄色。

这可以在HTML 中完成，还是我在这里不走运？

【问题讨论】：

您可以将propertycode作为一个类添加到所有行中，然后创建具有背景颜色的css类。谢谢。但是，我对 HTML 不是很熟悉。任何可能有用的链接？这个想法是给表格行添加一个样式类然后添加一个样式类 【参考方案1】：

根据以下值向 html 添加样式： Tryit editor

<html>
<head>
<style>
td border: solid black;border-width: 1px;padding-left:5px;padding-right:5px;padding-top:1px;padding-bottom:1px;font: 11px arial 

.cdm td  
    background-color: #0000FF;  color: white;  

.eba td 
    background-color: #CC9999; color: white;



</style>
</head>
<body>Report generated on : 22 Feb 2018 <br> 
<table cellpadding=0 cellspacing=0 border=0>
<tr> 
<td bgcolor=#E6E6FA><b>StayYear</b></td>
<td bgcolor=#E6E6FA><b>PropertyCode</b></td>
<td bgcolor=#E6E6FA><b>Jan</b>
</td><td bgcolor=#E6E6FA><b>Feb</b></td>
<td bgcolor=#E6E6FA><b>Mar</b></td>
<td bgcolor=#E6E6FA><b>Apr</b></td>
<td bgcolor=#E6E6FA><b>May</b></td>
<td bgcolor=#E6E6FA><b>Jun</b></td>
<td bgcolor=#E6E6FA><b>Jul</b></td>
<td bgcolor=#E6E6FA><b>Aug</b></td>
<td bgcolor=#E6E6FA><b>Sep</b></td>
<td bgcolor=#E6E6FA><b>Oct</b></td>
<td bgcolor=#E6E6FA><b>Nov</b></td>
<td bgcolor=#E6E6FA><b>Dec</b></td>
<td bgcolor=#0e914b><b>Total</b></td>
<tr class="cdm">
<td class="eba">2018</td>
<td>CDM</td>
<td>3261</td>
<td>2938</td>
<td>3054</td>
<td >2157</td>
<td>1948</td>
<td>889</td>
<td>1772</td>
<td>1620</td>
<td>872</td>
<td>1280</td>
<td>576</td>
<td>447</td>
<td>20814</td>
</tr><tr class="cdm">
<td>2017</td>
<td>CDM</td>
<td>2989</td>
<td>2622</td>
<td>2484</td>
<td>1756</td>
<td>1326</td>
<td>552</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>321</td>
<td>465</td>
<td>225</td>
<td>12740</td>
</tr><tr  class="eba">
<td>2018</td>
<td>EBA</td>
<td>1629</td>
<td>1494</td>
<td>1569</td>
<td>1085</td>
<td>1236</td>
<td>701</td>
<td>355</td>
<td>427</td>
<td>737</td>
<td>460</td>
<td>792</td>
<td>358</td>
<td>10843</td>
</tr><tr class="eba">
<td>2017</td>
<td>EBA</td>
<td>1778</td>
<td>1588</td>
<td>1580</td>
<td>1311</td>
<td>793</td>
<td>293</td>
<td>368</td>
<td>312</td>
<td>409</td>
<td>397</td>
<td>211</td>
<td>97</td>
<td>9137</td>
</tr><tr>
</td>
</table>
</body>
</html>

【讨论】：

谢谢。我在我的 SQL 查询中插入以下代码时遇到问题： 2018 我应该在哪里插入它们？我不习惯在我的查询中使用 XML，但我猜你可以尝试用 FOR XML RAW('tr'), 替换行 FOR XML RAW('tr class='''+ ISNULL([PropertyCode],'')+'''')，希望对你有帮助我在 SQL 中有以下错误消息：'+' 附近的语法不正确也许这可以帮助你更多：***.com/questions/7086393/…

以上是关于如何编辑我的 HTML 代码以根据条件突出显示一行的所有单元格？的主要内容，如果未能解决你的问题，请参考以下文章

如何根据事件以不同颜色突出显示日历中的日期？

使用存储过程有条件地格式化我的 HTML 报告？

通过python根据条件向html添加类

Rhandsontable 条件格式 - 如何根据特定属性值突出显示行？

根据条件在Angular Ionic中使用ngFor突出显示行

根据条件突出显示 panda df 错误