在 XSL 中突出显示表数据答案

【问题标题】：Highlighting table data in XSL在 XSL 中突出显示表数据
【发布时间】：2011-09-13 16:15:27
【问题描述】：

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

我们将不胜感激。

【问题讨论】：

显示输入 XML 的一些示例输出 HTML。
向您的转换添加参数很容易。 XSLT 在这里看起来困难的是根据用户下拉选择突出显示行。你不应该用 jquery/css 之类的东西来管理它吗？你是如何编译你的转换的？你使用浏览器端编译吗？

标签： xml xslt search html-table highlighting

【解决方案1】：

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

【讨论】：