ansaurus

Question

How to highlight table cells after checking a condition using javascript function whose values are fed by XSLT

Answer 1

A:

Here is an existing example of using XSLT and Javascript together.

This transformation produces an html page with javascript in which pressing on a number-button produces the square of that number:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     version="1.0">
<!-- squareAsHTMLJS1.xml: create an HTML document with JavaScript that
     interactively computes the square of each "number" element read from 
     the source tree. -->

  <xsl:template match="/"> <!-- Set up web page -->
    <html>
      <head>
        <title>Squares</title>
         <script language="JavaScript1.2">
           function showSquare(n) {
            alert("the square is " + n*n);
           }
        </script>
        <style> <!-- Put a little CSS in -->
           body { font-family: arial,helvetica; }
           h1   { font-size: 14pt }
           p    { font-size: 10pt}
        </style>
      </head>
      <body>
        <h1>Squares</h1>
        <p>Click a button to see the square of that number.</p>
        <form>
        <xsl:apply-templates/>
        </form>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="number">
    <p><input type="button" value=" {.} " onClick="showSquare({.})"/></p>
  </xsl:template>

</xsl:stylesheet>

when this transformation is applied on this XML document:

<numbers>
  <number>2</number>
  <number>11</number>
  <number>100</number>  
  <number>-5</number>
</numbers>

the result is:

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

      <title>Squares</title><script language="JavaScript1.2">
           function showSquare(n) {
            alert("the square is " + n*n);
           }
        </script><style> 
           body { font-family: arial,helvetica; }
           h1   { font-size: 14pt }
           p    { font-size: 10pt}
        </style></head>
   <body>
      <h1>Squares</h1>
      <p>Click a button to see the square of that number.</p>
      <form>

         <p><input type="button" value=" 2 " onClick="showSquare(2)"></p>

         <p><input type="button" value=" 11 " onClick="showSquare(11)"></p>

         <p><input type="button" value=" 100 " onClick="showSquare(100)"></p>

         <p><input type="button" value=" -5 " onClick="showSquare(-5)"></p>

      </form>
   </body>
</html>

You can play with this here: http://www.snee.com/xml/trxml33/numbersJS1.xml

And see more explanations by the author here: http://www.xml.com/pub/a/2003/02/05/tr.html

Dimitre Novatchev 2010-08-13 13:15:07

Answer 2

A:

This stylesheet:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
    <xsl:output method="xml"/>
    <xsl:template match="numbers">
        <html>
            <head>
                <style>.all-equal {background-color:yellow;}</style>
            </head>
            <body>
                <table>
                    <thead>
                        <tr>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        <xsl:apply-templates>
                            <xsl:with-param name="all-equal"
                            select="not(number[1] != number[position()!=1])"/>
                        </xsl:apply-templates>
                    </tbody>
                </table>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="number">
        <xsl:param name="all-equal"/>
        <tr>
            <td>
                <xsl:if test="$all-equal">
                    <xsl:attribute name="class">all-equal</xsl:attribute>
                </xsl:if>
                <xsl:value-of select="."/>
            </td>
        </tr>
    </xsl:template>
</xsl:stylesheet>

With this input:

<numbers>
  <number>20</number>
  <number>20</number>
  <number>20</number>
</numbers>

Output:

<html>
    <head>
        <style>.all-equal {background-color:yellow;}</style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="all-equal">20</td>
                </tr>
                <tr>
                    <td class="all-equal">20</td>
                </tr>
                <tr>
                    <td class="all-equal">20</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Alejandro 2010-08-13 17:30:22

ansaurus

tags:

views:

answers:

How to highlight table cells after checking a condition using javascript function whose values are fed by XSLT

related questions