javascript - 通过评估 innerHTML 更改类

Question

我正在尝试更改 <span> 的样式通过改变它的类。我正在评估它的文本值，并希望它在小于 97.7 时将 className 更改为“红色”，或者在其他情况下更改为“绿色”。我正在评估所有 <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。我尝试搜索，但没有找到此处发布的有效方法。

Answer 1

我创建了一个似乎有效的 jsfiddle。我刚刚使用了:

   document.querySelectorAll('span.qadata')

它更改类 qadata 的跨度的类名。 http://jsfiddle.net/mYUjL/