Изменить класс, оценивая innerHTML

Я пытаюсь изменить стиль <span>, изменив его класс. Я оцениваю его текстовое значение и хочу, чтобы он изменил имя класса на "красный", если он меньше 97.7, или "зеленый", если он что-то еще. Я оцениваю все <span> класса "qadata".

function changeColor() {

var cells = document.getElementsByTagName('span').getElementsByClassName('qadata');

for (var i=0, len=cells.length; i<len; i++) {
    if (parseFloat(cells[i].innerHTML) < 97.7){
        cells[i].className = 'red';
    }
    else {
        cells[i].className = 'green';
    }
}

}

Я пытаюсь сделать это в следующей таблице HTML:

<table datasrc='#QA' class="qa">

  <thead>
    <tr>
      <th>Period</th>
      <th>Safety</th>
      <th>Quality</th>
      <th>Shipping</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td class="leftcolumn"><span datafld='Period' width=100%></span></td>
      <td><span datafld='Safety' width=100% class="safety"></span></td>
      <td><span datafld='Quality' width=100% class="qadata"></span></td>
      <td><span datafld='Shipping' width=100% class="qadata"></span></td>
    </tr>
  </tbody>

</table>

Данные заселяются с использованием другой функции до вызова changeColor(). Это корпоративный сайт интрасети, поэтому я сейчас застрял с использованием ie8 или ie10. В этом случае JavaScript предпочтительнее jQuery.

Я много лет занимаюсь HTML и CSS, но до недавнего времени так и не попал в JavaScript. Я попробовал поиск, но не нашел способ, который вы опубликовали здесь, который работает.