在XSL中突出显示表格数据

如何解决在XSL中突出显示表格数据

| 我需要一些代码来突出显示表中大于或小于用户定义的数字（需要通过html下拉菜单设置的值）的值，即如果用户说他们想要表中的所有数据条目大于要标记的103（例如），它将在表格中用红色背景标记它们。这是我的XSL代码（用于环境数据），它可以正确显示链接的XML表中的信息。但是现在我需要向页面添加可定义的搜索参数。

<xsl:value-of select=\"Sample/Site\"/>
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\">
<tr>
<th>Date</th><th>E. coli by MPN (HRC)</th><th>Total Coliforms (HRC)</th><th>Flow</th>
</tr>
<tr>
<th></th><th></th><th></th><th></th>
</tr>
<tr>
<th></th>
<th class=\"pad\"><xsl:value-of select=\"Sample/Measurement[@Name=\'E. coli by MPN (HRC)\']/Units\"/></th>
<th class=\"pad\"><xsl:value-of select=\"Sample/Measurement[@Name=\'Total Coliforms (HRC)\']/Units\"/></th>
<th class=\"pad\"><xsl:value-of select=\"Sample/Measurement[@Name=\'Flow\']/Units\"/></th>
</tr>
<xsl:for-each select=\"Sample[Measurement/@Name=\'E. coli by MPN (HRC)\' or Measurement/@Name=\'Total Coliforms (HRC)\']\">
 <tr>
<td><xsl:value-of select=\"Date\"/></td>
<td class=\"value\"><xsl:value-of select=\"Measurement[@Name=\'E. coli by MPN (HRC)\']/Value\"/></td>
<td class=\"value\"><xsl:value-of select=\"Measurement[@Name=\'Total Coliforms (HRC)\']/Value\"/></td>
<td class=\"value\"><xsl:value-of select=\"Measurement[@Name=\'Flow\']/Value\"/></td>
</tr>

</xsl:for-each>
</table>

这是XML数据

<?xml version=\"1.0\"?>
 <Sample> 
     <Site>Manawatu at Teachers College</Site>
     <Date> 1-Jul-2010 13:43</Date>

       <Measurement Name=\"E. coli by MPN (HRC)\"> 
          <Value>147</Value> 
          <Units>MPN/100mL</Units> 
       </Measurement> 

       <Measurement Name=\"Total Coliforms (HRC)\"> 
          <Value>2420</Value> 
          <Units>MPN</Units> 
       </Measurement> 

       <Measurement Name=\"Flow\">
          <Value>175723</Value>
          <Units>l/s</Units>
       </Measurement> 

</Sample>

这是输出数据

Manawatu at Teachers College            
Date            E. coli by MPN (HRC)    Total Coliforms (HRC)   Flow

                    MPN/100mL            MPN                     l/s
1/07/2010 13:43     147                 2420                    175723
2/07/2010 14:15     102                 1553                    138210
5/07/2010 13:41     74                  1120                    83026
.....

帮助将不胜感激。

解决方法

我会使用JavaScript解决方案。我举了一个简单的例子：在*.xsl文件中，在</table>元素之后：

<script>
<![CDATA[

var td_elements=document.getElementsByTagName(\"td\");
var td_elements_with_values=[];

for(var i=0; i<td_elements.length; ++i)
{
   if(td_elements[i].className==\"value\")
      td_elements_with_values.push(td_elements[i]);
}

var td_elements_with_values_length = td_elements_with_values.length;

function highlight()
{
   var number = parseFloat(document.getElementById(\"number\").value);
   var find_greater = document.getElementById(\"greater\").checked;

   for (var i=0; i<td_elements_with_values_length; ++i)
   {
      var value=parseFloat(td_elements_with_values[i].firstChild.nodeValue);
      if(find_greater)
      {
         if(number<value)td_elements_with_values[i].style.color=\"red\";
         else td_elements_with_values[i].style.color=\"black\";
      }
      else if(number>value)td_elements_with_values[i].style.color=\"red\";
      else td_elements_with_values[i].style.color=\"black\";
}
]]>
</script>
<form>
   <label for=\"number\">Define number</label><br/>
   <input type=\"text\" id=\"number\"/><br/>
   <input type=\"radio\" id=\"greater\" name=\"greater_or_less\" checked=\"checked\"/>
   <label for=\"greater\">greater</label><br/>
   <input type=\"radio\" id=\"less\" name=\"greater_or_less\"/>
   <label for=\"less\">less</label><br/>
   <input type=\"button\" value=\"highlight\" onclick=\"highlight()\"/>
</form>