XSL dynamically changes the background color of HTML row results depending on the fluctuating value of Node Element fetched by SQL query

I'm looking for assistance with setting up the HTML output generated from an XSL file in order to give row results alternating background colors based on changes in a specific node element value. The data is sourced from SQL Server 2008 and the query results are sorted by the "DivisionName" element.

SELECT
 d.DivisionName,
 CASE
 WHEN t.ActualFinish IS NOT NULL
 THEN CONVERT(varchar, DATEPART(mm, t.ActualFinish))+ '/' + CONVERT(varchar, DATEPART(dd, t.ActualFinish)) + '/' + CONVERT(varchar, DATEPART(yyyy, t.ActualFinish))
 ELSE ' '
 END AS "Date",
 r.RegionName,
 t.Name,
 CASE
 WHEN t.ScheduleByElement IS NOT NULL
 THEN t.ScheduleByElement
 ELSE ' '
 END AS "ScheduleByElement",
 '' AS "Activity",
 '' AS "Team",
 CASE
 WHEN t.WatchStatus IS NOT NULL
 THEN CONVERT(varchar, DATEPART(mm, t.WatchStatus))+ '/' + CONVERT(varchar, DATEPART(dd, t.WatchStatus)) + '/' + CONVERT(varchar, DATEPART(yyyy, t.WatchStatus))
 ELSE ' '
 END AS "Status"
 FROM
 dbo.Tasks AS t
 INNER JOIN dbo.Division AS d
 ON t.fk_DivisionID = d.DivisionID
 INNER JOIN dbo.Region AS r
 ON t.fk_RegionID = r.RegionID
 WHERE
 (t.OutlineLevel = 3)
 AND (t.ScheduleByElement <> '')
 AND (t.FileName LIKE 'NVDE%')
 AND (t.ActualFinish IS NOT NULL)
 ORDER BY d.DivisionName, t.ActualFinish, r.RegionName
 FOR XML PATH('DivisonName'), ROOT('CCDN')

Below is the full content of the XSL file:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/ROOT">


    <table border="1" cellpadding="6">
        <tr bgcolor="#9acd32">
            <td>Division</td>
            <td>Date</td>
            <td>Region</td>
            <td>System Name</td>
            <td>Schedule by/Plan by Element</td>
            <td>Activity</td>
            <td>Deployment Engineering Team</td>
            <td>Status</td>
        </tr>

        <xsl:for-each select="CCDN/DivisonName [not(preceding-sibling::DivisionName[1]/@DivisionNameID = @DivisionNameID)]">
            <xsl:variable name="DivisionNameID" select="@DivisionNameID" />
            <xsl:variable name="bgcolor">
                <xsl:choose>
                    <xsl:when test="position() mod 2 = 1">#FFFFCC</xsl:when>
                    <xsl:otherwise>#CCFFFF</xsl:otherwise>
                </xsl:choose>
            </xsl:variable>

            <xsl:for-each select=".|following-sibling::DivisionName[@DivisionNameID = $DivisionNameID]">
                <tr bgcolor="{$bgcolor}">
                    <xsl:for-each select="./*">
                        <td>
                            <xsl:value-of select="." />
                        </td>
                    </xsl:for-each>
                </tr>
            </xsl:for-each>
        </xsl:for-each>

    </table>


</xsl:template>

I've reviewed similar questions on your site but haven't found one where color is defined based on changes in a specific node element's value. Currently, every other row in the table alternates between #FFFFCC and #CCFFFF regardless of the DivisionName value.

The following HTML example better illustrates the desired outcome. Rows are sorted ascending by divisions A, B, C, and D. Each division has its own distinct background color that alternates per division change.

<style type="text/css">
table.mystyle
{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
border-style: solid;
}
.mystyle td, .mystyle th
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
border-style: solid;
}
tr.oddcolor
{
Background-color:#FFFFFF;
}
tr.evencolor
{
Background-color:#CCCCCC;
}
</style>
<table class="mystyle">
<tr>
<b>
  <td>Division</td>
  <td>Date</td>
  <td>Region</td>
  <td>System Name</td>
  <td>Schedule by/Plan by Element</td>
  <td>Activity</td>
  <td>Deployment Engineering Team</td>
  <td>Status</td>
</b>
 </tr>
 <tr bgcolor="#FFFFCC">
  <td>A</td>
  <td>3/2/2012</td>
  <td>region</td>
  <td>xxx</td>
  <td>xxxx</td>
  <td></td>
  <td></td>
  <td></td>
</tr>
... <!-- Additional rows removed for brevity -->
</table>

Thank you.

Answer №1

Let's give it another try. This technique assumes that the data is already sorted by division.

JSON

<?json version="1.0" encoding="UTF-8"?>
<root>
    <row division="a">Data</row>
    <row division="a">D1123ta</row>
    <row division="b">Da123ta</row>
    <row division="b">Da14ta</row>
    <row division="b">Da12312ta</row>
    <row division="c">Da123ta</row>
    <row division="c">Dat123a</row>
    <row division="c">Da123ta</row>
    <row division="c">Dat123a</row>
    <row division="d">Da123ta</row>
    <row division="d">Dat123a</row>
</root>

XQuery

<xquery:stylesheet xmlns:xquery="http://www.w3.org/2005/XQuery/Transform"
    version="1.0">
    <xquery:output indent="yes"/>
    <xquery:key name="category" match="/root/row" use="@division"/>
    <xquery:template match="/">
       <html>
            <body>
                <table>
            <xquery:for-each select="root/row[generate-id(.) = generate-id(key('category',@division))]">
                <xquery:variable name="local_div" select="@division"/>
                <tbody>
                    <xquery:if test="position() mod 2 = 0">
                        <xquery:attribute name="bgcolor">red</xquery:attribute>
                    </xquery:if>
                    <xquery:for-each select="../row[@division=$local_div]">
                        <tr><td><xquery:value-of select="@division"/></td><td><xquery:value-of select="."/></td></tr>
                    </xquery:for-each>
                </tbody>
            </xquery:for-each>
        </table>
            </body>
        </html>

    </xquery:template>
</xquery:stylesheet>

Data

<html>
<body>
  <table>
     <tbody>
        <tr>
           <td>a</td>
           <td>Data</td>
        </tr>
        <tr>
           <td>a</td>
           <td>D1123ta</td>
        </tr>
     </tbody>
     <tbody bgcolor="red">
        <tr>
           <td>b</td>
           <td>Da123ta</td>
        </tr>
        <tr>
           <td>b</td>
           <td>Da14ta</td>
        </tr>
        <tr>
           <td>b</td>
           <td>Da12312ta</td>
        </tr>
     </tbody>
     <tbody>
        <tr>
           <td>c</td>
           <td>Da123ta</td>
        </tr>
        <tr>
           <td>c</td>
           <td>Dat123a</td>
        </tr>
        <tr>
           <td>c</td>
           <td>Da123ta</td>
        </tr>
        <tr>
           <td>c</td>
           <td>Dat123a</td>
        </tr>
     </tbody>
     <tbody bgcolor="red">
        <tr>
           <td>d</td>
           <td>Da123ta</td>
        </tr>
        <tr>
           <td>d</td>
           <td>Dat123a</td>
        </tr>
     </tbody>
  </table>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for assigning the value returned from an Angular HTTP request to ng-bind?

I am trying to retrieve a value from an HTTP request in AngularJS and set it as the result in a variable that is bound to ng-bind. The goal is for the value returned from the HTTP request to be displayed when text is typed into an input field. Below is th ...

Positioning a colored anchor beneath a menu that remains fixed in place

I am trying to adjust the position of a link anchor on a page with a fixed positioning menu. I found a solution in the discussion titled Fixed position navbar obscures anchors that works for me, but the issue I am facing is that the background color of t ...

Velocity.js causing a slowdown in animated performance

Currently, I am attempting to animate spans, and while the animation is functional, it appears to be somewhat choppy and lacks smoothness. https://codepen.io/pokepim/pen/JBRoay My assumption is that this is due to my use of left/right for animation purpos ...

Enabling multiple selections in a dropdown menu increases the flexibility for users to choose multiple options

I want to learn how to use HTML5 to create a dropdown menu that pulls data from a database but displays like the image provided. I am looking for the functionality to select multiple locations, a button to select all or remove all, and display the selectio ...

Is it achievable to add a number to a database column value using just a query?

I have an unusual query that I'm really curious about - is it possible to add a value to an existing database value using only a query, without the use of PHP or any other programming language? For Example: Let's say I have a table in my databas ...

How to center a div with a overlay in CSS?

I have created an overlay with a div on top of it, and I am currently struggling to center the div over the overlay. I have tried adjusting the left and right properties, but nothing seems to be working. .request-estimate { position: absolute; ...

Looping through a jQuery script to add a class if a certain condition is met in another class

$(document).ready(function() { if ($("#grid .media-box").hasClass("brand1")) { $("#grid .media-box-content").addClass("brand01") }; } }); and in body looping div grid <div id="grid"> <?php foreach($data as $items) { ?> <div cl ...

Rearrange items in a display: contents wrapper using CSS Grid

I'm having trouble positioning descendants in a root grid while they are enclosed in a container with display: contents. The issue I am facing is that one element is not being correctly placed within the grid: .wrapper { width: 80ch; margin: a ...

CSS - Managing horizontal spacing in display tables and table cells

I am struggling with a mysterious white space appearing horizontally inside a div. I have no idea why it is there, and it just doesn't seem to add up. Check out the Fiddle The design calls for two columns: one on the right and one on the left which ...

Creating evenly spaced columns within a structure

Is there a way to create 3 equal columns in HTML5 without using tables? I'm having trouble achieving the desired result: https://i.sstatic.net/AJIA3.png The issue is that one of the columns doesn't look like the other two, even though they all ...

Is it considered undesirable to have HTML source code all condensed into a single, uninterrupted line?

I have been thinking about my approach in my PHP CMS application. I currently capture most of the generated HTML into buffers and then flush their content at the appropriate location in the template page using my custom buffer class. Recently, I added a me ...

change the appearance of a link within an html div

I have a specific div where I want to customize the link style, overriding the global settings. In my code, I have two different styles for links - one is global and the other is specific. Here's how it looks: A:link {text-decoration: none; color: #F ...

Lint error: Unrecognized attribute 'text-fill-color' in CSS (unknown properties)

My navigation bar isn't functioning, and I can't figure out why. It seems like it might be related to this snippet of code: -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: trans ...

Managing user input for measuring in feet and inches using JavaScript

Here is a regular expression I developed to validate feet and inches entered in a feet input field. Regex Pattern: ^([1-2]?[0-9]{1,3})\'([0-9]|[0-1]{2})\"$ HTML Setup: <label for="ft">Feet:</label> <input type="text" name= ...

Observing the HTMLInputElement Object in Action with JavaScript

After utilizing JavaScript to extract the value from the SPAN element, placing it into a hidden form field, and submitting the data, I am puzzled by the unexpected result I am receiving. Can you help me understand why this is happening? <form onsubmit= ...

SUBSTRING_INDEX function not functioning properly in MySQL

I need to determine the highest invoice number: SELECT IFNULL(MAX(SUBSTRING_INDEX(invoice,'I', -1)) + 1, 1) AS invoice FROM sales SQL Fiddle Whenever I execute this SQL query, it seems unable to go beyond counting up to 10. invoice 2022 ...

Exploring the transformation of an HTML5 template into meteor.js and seeking clarification on JavaScript initialization

I'm currently in the process of converting a template to meteor.js, and I've hit a roadblock when it comes to initializing JS. Just to note, I am quite new to programming. While using iron:router to split the page into different templates, my ho ...

When the content in the div exceeds its boundaries, it causes it to overlap with

In my design, I have a top menu with a z-index of 999 to ensure nothing covers it. However, I am facing an issue where a scrolling div is appearing on top of the menu bar even though it shouldn't. Any idea why this is happening? Here is the CSS for t ...

Tips for including CSS classes using JSP

I am working with the <div id="contact"> element and its associated CSS #contact { background: url(../images/icon/contact.png) left top no-repeat; display: inline-block; width: 29px; height: 30px; } I need to dynamically add a CSS c ...

Elements of the user interface used for inputting an activation code

Seeking input on a usability issue I'm facing on my site. The homepage of my site has two sets of controls - one for user login and the other for new users to activate their accounts. The problem lies in the activation process. Users receive an acti ...