在XSL中突出显示表数据

时间:2011-06-13 04:32:20

标签: xml xslt search html-table highlighting

我需要一些代码来突出表中大于或小于用户定义数字的值(需要通过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
.....

非常感谢帮助。

1 个答案:

答案 0 :(得分:0)

我使用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>