What is the best way to emphasize a certain row within XSLT?

I am seeking a solution to emphasize rows containing the "year" element with a value exceeding "2000" in XML and XSLT.

Here is the code snippet:

XML

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="harrypotterbooks.xsl"?>
<!DOCTYPE catalog [
<!ELEMENT catalog (book)>
<!ELEMENT book          (title,author,country,publisher,price,year)>
<!ELEMENT title         (#PCDATA)>
<!ELEMENT author        (#PCDATA)>
<!ELEMENT country       (#PCDATA)>
<!ELEMENT publisher     (#PCDATA)>
<!ELEMENT price         (#PCDATA)>
<!ELEMENT year          (#PCDATA)>
]>

<catalog>
    <book>
        <title>Harry Potter and the Philosophers Stone</title>
        <author>J.K Rowling</author>
        <country>United Kingdom</country>
        <publisher>Bloomsbury</publisher>
        <price>$11.99</price>
        <year>26/06/1997</year>
    </book>
    <book>
        <title>Harry Potter and the Chamber of Secrets</title>
        <author>J.K Rowling</author>
        <country>United Kingdom</country>
        <publisher>Bloomsbury</publisher>
        <price>$13.99</price>
        <year>02/07/1998</year>
    </book>
    <book>
        <title>Harry Potter and the Prisoner of Azkaban</title>
        <author>J.K Rowling</author>
        <country>United Kingdom</country>
        <publisher>Bloomsbury</publisher>
        <price>$12.99</price>
        <year>08/07/1999</year>
    </book>
    <book>
        <title>Harry Potter and the Goblet of Fire</title>
        <author>J.K Rowling</author>
        <country>United Kingdom</country>
        <publisher>Bloomsbury</publisher>
        <price>$16.99</price>
        <year>08/07/2000</year>
    </book>
    <book>
        <title>Harry Potter and the Order of the Phoenix</title>
        <author>J.K Rowling</author>
        <country>United Kingdom</country>
        <publisher>Bloomsbury</publisher>
        <price>$17.99</price>
        <year>21/06/2003</year>
    </book>
    <book>
        <title>Harry Potter and the Half Blood Prince</title>
        <author>J.K Rowling</author>
        <country>United Kingdom</country>
        <publisher>Bloomsbury</publisher>
        <price>$19.99</price>
        <year>16/07/2005</year>
    </book>
    <book>
        <title>Harry Potter and the Deathly Hallows</title>
        <author>J.K Rowling</author>
        <country>United Kingdom</country>
        <publisher>Bloomsbury</publisher>
        <price>$25.99</price>
        <year>21/07/2007</year>
    </book>
</catalog>

and this XSL

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
    <html>
    <body>
    <h2>My Book Collection</h2>
    <table border="1">
        <tr bgcolor="#9acd32">
            <th>Title</th>
            <th>Author</th>
            <th>Country</th>
            <th>Publisher</th>
            <th>Price</th>
            <th>Year of Release</th>
        </tr>
        <xsl:for-each select="catalog/book">
        <tr xsl:if test="substring-after(year,'/') > 2000">
            <td><xsl:value-of select="title"/></td>
            <td><xsl:value-of select="author"/></td>
            <td><xsl:value-of select="country"/></td>
            <td><xsl:value-of select="publisher"/></td>
            <td><xsl:value-of select="price"/></td>
            <td><xsl:value-of select="year"/></td>
        </tr>
        </xsl:for-each>
    </table>
    </body>
    </html>
</xsl:template>

</xsl:stylesheet>

What would be the optimal approach to highlight any row where the "year" value is greater than "2000"?

Thank you kindly

htmlcssxmlxslt

Answer №1

To modify the CSS style for rows with a year greater than 2000, you can test the year and apply a specific attribute like this:

    <tr>
      <xsl:if test="substring(year, string-length(year)-3) > 2000">
        <xsl:attribute name="style">background-color: yellow</xsl:attribute>
      </xsl:if>

The resulting HTML output will then be:

A complete working example is provided below...

The input XML data provided:

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <book>
    <title>Harry Potter and the Philosophers Stone</title>
    <author>J.K Rowling</author>
    <country>United Kingdom</country>
    <publisher>Bloomsbury</publisher>
    <price>$11.99</price>
    <year>26/06/1997</year>
  </book>
  (Additional book entries here...)
</catalog>

An XSLT file to transform the input XML:

<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/">
    <html>
      <body>
        <table border="1">
          <tr bgcolor="#9acd32">
            <th>Title</th>
            <th>Author</th>
            <th>Year of Release</th>
          </tr>
          <xsl:for-each select="catalog/book">
            <tr>
              <xsl:if test="substring(year, string-length(year)-3) > 2000">
                <xsl:attribute name="style">background-color: yellow</xsl:attribute>
              </xsl:if>
              <td><xsl:value-of select="title"/></td>
              <td><xsl:value-of select="author"/></td>
              <td><xsl:value-of select="year"/></td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>

</xsl:stylesheet>

The transformed HTML content with updated styles:

<html>
   <body>
      <table border="1">
         <tr bgcolor="#9acd32">
            <th>Title</th>
            <th>Author</th>
            <th>Year of Release</th>
         </tr>
         <tr>
            <td>Harry Potter and the Philosophers Stone</td>
            <td>J.K Rowling</td>
            <td>26/06/1997</td>
         </tr>
         (Additional rows displayed here...)
      </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

The simplest way to increase the size of a child element in order to generate a scrollable area

When working with HTML, it's important to consider how the size of a child div affects the parent div. If the child div is larger than its parent, scrollbars will appear on the parent div if the appropriate style rules are set. However, I'm inte ...

javascripthtmlcssresizescroll

Reducing Image Size in JavaScript Made Easy

I need help with a project where I want the image to shrink every time it's clicked until it disappears completely. I'm struggling to achieve this, can someone assist me? Here is the HTML code I have: <html lang="en" dir="l ...

javascripthtmlcss

I am attempting to dynamically align the images of two articles. The exact heights of the containers are not specified. Can anyone provide guidance on how to achieve this?

My code snippets: <article class="featured"> <img src="http://www.placehold.it/300x100/ff0000"> <p> <!--Text--> </p> </article> <article class="sub-featured"> <img src="http://www.placeh ...

css

Tips for centering links in the navigation bar on Bootstrap 5 when viewing in a small size

I had previously inquired about customizing the Bootstrap 5 navbar in this post: Adjust navbar height to be smaller and I received some helpful answers. Thank you to everyone who responded. However, I now have a follow-up question: I am interested in ch ...

cssbootstrap-5

Tips for assigning a string value to an <li> element with Jquery

I have a database table structured as follows: ID name aa1 Tom bb2 Jack cc3 Mike To display this data in an HTML format, I am using Ajax to pass the values. $.ajax({ ... success: function (data) { $.each(data, f ...

jqueryajaxasp.net-mvchtml

Connecting two fields with a line on click in AngularJS

In the top section, there are 10 fields and in the bottom section, there are another 10 fields. I want to be able to connect two fields with a line when they are clicked (one from the top section and one from the bottom section). This connection should app ...

javascripthtmljquerycssangularjs

Article with content surpassing the boundary of its parent container

I'm struggling to contain text within the parent's div as it keeps overflowing. I attempted using element.style { text-overflow: ellipsis; overflow: hidden; } but unfortunately, it didn't work. Take a look here at my JSFiddle link. It ...

htmlcss

Steps to incorporate padding to a nested Angular Component by leveraging the CSS of its parent component

It is evident from the example at https://material.angular.io/components/expansion/examples that material components can be customized using the CSS of the component embedding them: .example-headers-align .mat-form-field + .mat-form-field { margin-left: ...

cssangular

MUI Datepicker options for selecting dates

Is there a way to selectively enable certain dates and disable all others in the MUI Datepicker? For example, I need to only allow dates that are 7 days later or earlier to be selectable, while all other dates should be disabled. How can this be achieved? ...

htmlreactjsmaterial-uidatepickermui-x-date-picker

Click to make the arrow come to life through animation!

I am brand new to coding and this is my inaugural code snippet: .container_menu { position: relative; top: 0px; left: 0px; width: 25px; height: 25px; } .container_menu .line-1 { background-color: black; width: 59%; height: 2px; positio ...

cssanimation

Incorporating Scatter Dots into a Horizontal Stacked Bar Chart using Chart.js

My horizontal stacked bar chart is not displaying pink scatter dots based on the right y axis numbers. I need help figuring out what I am doing wrong. When I change the chart to a normal bar instead of horizontal, the dots appear. However, I require them ...

javascripthtmlangularchart.js

Issue with event.preventDefault() in Jquery not functioning as expected

My goal is to have the menu display and hide list items on click, with them being hidden by default. However, the issue I am facing is that the menu is generated in the admin section, so it automatically assigns a URL to each item. If I set the URL field o ...

javascriptjqueryhtmlcss

What could be the reason for my CSS animation with :hover @keyframes not functioning?

As a newcomer, I am struggling to understand why this code isn't functioning correctly. My goal is to create the illusion of a flying bird. This is my HTML: <img src="http://dl.dropboxusercontent.com/u/105046436/tw.png" /> <br> <div c ...

htmlcsscross-browsercss-animations

What could be causing the variations in appearance of my HTML forms between Sharepoint and jsfiddle?

Currently, I am working on a Sharepoint Web Part mockup in this fiddle. As shown below, the second form is not yet formatted or aligned properly: Additionally, there are issues with the alignment of the second form, which appears a row below where it shou ...

htmlcsssharepoint-2010web-parts

Tips for aligning numbers in a monospaced ordered list

Is there a way to align the numbers in a numbered list within a table using monospace font so that they are at the same level as bullets on a bullet list? Simplest example: ol { font-family: monospace; } ul, ol { margin-top: 10px; margin-bottom: ...

htmlcss

Hide object scroll percentage with CSS styling

Is there a way to dynamically hide an element based on the user's scrolling behavior? I have incorporated floating social buttons into my website, and I am looking for a solution that will hide them when the user reaches the bottom of the page (foote ...

cssscrollhidepercentage

When trying to implement a dark/light theme, CSS variables may not function properly on the body tag

Currently, I am in the process of developing two themes (light and dark) for my React website. I have defined color variables for each theme in the main CSS file as shown below: #light{ --color-bg: #4e4f50; --color-bg-variant: #746c70; --color-primary: #e2 ...

javascripthtmlcssreactjs

Increase the spacing between the scrollbar and the border

Looking to create some breathing room between the scrollbar and the right border of my text area. I've tried adjusting the margin-right/left values in -webkit-scrollbar with no success. Here's my style component: const FormTextArea = styled.texta ...

htmlcssscrollbarstyled-componentsmargin

Achieving this result in HTML using a jQuery accordion component

Hey there, I'm looking to create a full-height accordion that extends from the bottom to the top of the page, similar to what you see on this website: . I also have a footer positioned below the accordion. The content should load when the page loads ...

javascriptjqueryhtmlcssjquery-ui-accordion

In the realm of web development, the Phoenix library introduces the concept

Is there a way to combine a dynamic classname and a static one effectively? <div class=<%="#{getClass(app.status)} two" %> What happens is <div class="one" two> Instead of the desired output of <div class="one t ...

htmlelixirphoenix-framework