Apply a strike-through line on Order Row based on a condition, GSP, JQ

Question

I am displaying a list of objects in a table such that 1 row for each object. I want a particular row to have strike-through line running over it if the object has a certain parameter set to 1. Here is my code:

<% patientOrders.each { order -> %>

 <tr class="orderRow">

  <% if(order.discontinued == 1) { %>

   <script type="text/javascript">
     jq(this).closest('.orderRow').css({"text-decoration": "line-through","text-decoration-color": "red"});
   </script>
  <% } %>

  <td>${ order.drugname.getDisplayString().toUpperCase() }</td>
  <td>${ order.startdate.format('yyyy-MM-dd') }</td>

 </tr>
<% } %>

Each Patient Order is listed in the table. For all those Orders for which the 'discontinued' parameter is set to 1, a strike-through line is shown. I a not able to get this implemented. Could anyone please help me?

Thank you!

Answer 1

You can conditionally add a class on the 'tr', for discontinued orders, and write CSS for strike-through, maybe like this:

<% patientOrders.each { order -> %>

 <tr class="orderRow <% if(order.discontinued == 1) { %> discontinued <% } %>">

  <td>${ order.drugname.getDisplayString().toUpperCase() }</td>
  <td>${ order.startdate.format('yyyy-MM-dd') }</td>

 </tr>
<% } %>

CSS:

orderRow.discontinued{
    text-decoration: line-through;
    text-decoration-color: red;
}

Note: text-decoration-color is not supported on most of the major browsers, you may use color: red instead, but it will change the text color as well.

If you want the strike-though line to be red and the text to be of different color, then you can override the td's color, along with the CSS above, to achieve that:

CSS:

.orderRow td{
    color: black;
}