Подсветка данных таблицы в XSL - PullRequest
Новая
       13

Подсветка данных таблицы в XSL

2 голосов
/ 13 июня 2011

Мне нужен код, который будет выделять значения в таблице, которые больше или меньше определенного пользователем числа (которое должно быть установлено в раскрывающемся меню 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 голосов
/ 19 июня 2011

Я бы использовал решение 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>
...