1

I'm trying to change the background-color of a parent <td> element, however I cannot edit the HTML directly. The program my workplace uses is very rigid and only accepts SQL queries. The program then builds an HTML table from the query and automatically sends the result set out as an email. I cannot edit the HTML before it sends.

To get around this, I've figured out a way to change some properties of the table by injecting my own child elements through the query. For example:

Original query: SELECT column1 FROM table;

HTML cell output:

<td>  
   <p>  
      <span> value </span>  
   </p>  
</td>

Modified query: SELECT '<span style="color:red">' + column1 + '</span>' AS [column1] FROM table;

HTML cell output:

<td>  
   <p>  
      <span>  
         <span style="color:red"> value </span>  
      </span>  
   </p>  
</td>

Through this method I'm able change the style of the text. However, I cannot figure out how to change the background-color property of the parent <td> element. Is there any way I can change the style of the <td> element using this method? Am I out of luck?

Jack Morris
  • 87
  • 11
  • your "modified" query and the HTML output doesn't really correlate. If you really are querying + column1 + , then surely your output would end up with

    .....

    – Craig Jun 05 '23 at 22:40
  • Potentially all you could really do is just do a REPLACE on the tag, but chances are you've probably got a bunch of other cells that you don't want to change the colour of. Alternatively, you could query the column as XML and iterate the various nodes, but that would be one heck of a butt pain ..... – Craig Jun 05 '23 at 22:44
  • I hope this will help you. add a `style` tag along with the `span` like this. `SELECT '' + column1 + '' AS [column1] FROM table;` – Ibrahim Hamaty Jun 05 '23 at 22:47
  • Why is the question closed? His question is different. – Ibrahim Hamaty Jun 05 '23 at 22:52
  • @IbrahimHamaty the comment you added confirms the duplicate. You add a class to the child and use a "parent selector" to select the parent element --> the duplicate question – Temani Afif Jun 05 '23 at 23:43
  • @Craig The program creates each cell using a preset ```

    value

    ``` template, ```value``` is taken directly from the SQL result set as text. So in my case if SQL returns $99.99, I replace that value with ```$99.99```. The template parent elements remain unchanged. Outlook then translates that text as part of the HTML table and adjusts the style appropriately.     – Jack Morris Jun 06 '23 at 13:45
  • @IbrahimHamaty Thank you, I've confirmed that the HTML is outputting as ```

    value

    ```. However, the cell is still not red when it sends as an email. Maybe Outlook is ignoring the ```     – Jack Morris Jun 06 '23 at 14:03
  • @IbrahimHamaty I've figured out that pseudo-classes aren't supported by Outlook, so using has() will not work unfortunately. Really frustrating as it works on mobile and in browser, just not on the Outlook Windows app. – Jack Morris Jun 06 '23 at 16:52

1 Answers1

-1

You could send a div and style that:

<div style="background: blue;">
    <span style="color:red"> value </span>
</div>
Stefan Grigore
  • 26
  • 5