Блог

Главная - Вопросы по программированию - Выделение табличных данных в XSL

Выделение табличных данных в XSL

#xml #xslt #search #html-table #highlighting

#xml #xslt #Поиск #html-таблица #выделение

Вопрос:

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

2. Добавить параметр к вашему преобразованию легко. Что кажется сложным для XSLT здесь, так это выделение строк на основе пользовательского выпадающего списка. Разве вы не должны управлять этим с помощью чего-то вроде jquery / css? Как вы компилируете свое преобразование? Используете ли вы компиляцию на стороне браузера?

Ответ №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>