Question

Javascript 改变文本颜色

2016-01-06

442

javascript html

我有一个 HTML 表格，显示的值如下：

<table id="tableID">
<thead>
<tr>
  <th>Column heading 1</th>
  <th>Column heading 2</th>
  <th>Column heading 3</th>
  <th>Column heading 4</th>
</tr>
</thead>
<tbody>
<tr>
 <td> ID (43.1)</td>
  <td>Class (-23)</td>
  <td>Age (89.6)</td>
  <td>Num (-5)</td>
</tr>
<tr>
  <td>ID (-4)</td>
  <td>Class (-3)</td>
  <td>Age (0)</td>
  <td>Num (98)</td>
</tr>
<tr>
  <td>ID (10)</td>
  <td>Class (-32)</td>
  <td>Age (7)</td>
  <td>Num (2)</td>
</tr>

手头的任务是，我想根据条件更改文本颜色。如果值为负，则应显示为红色，否则显示为绿色。我不知道如何更改它，直到现在我能够创建以下 javascript 代码，但不确定如何处理文本颜色以及应该使用哪个事件。有人可以提供指导吗？

var table = document.getElementById('tableID'),
cells = table.getElementsByTagName('td');

for (var i=0,len=cells.length; i<len; i++){
cells[i].onready = function(){ // onready .. will that work??
    console.log(this.innerHTML);

}
}

编辑：这是我生成 HTML 表格的方式

function generateTable($associative_array){
echo '<table width="620" id ="optimization" class="optimization_table"><thead><tr><th>';
echo implode('</th><th>', array_keys(current($associative_array)));
echo '</th></tr></thead><tbody>';
foreach ($associative_array as $row){
    array_map('htmlentities', $row);
    echo '<tr valign="middle"><td>';
    echo implode('</td><td>', $row); 
    echo '</td></tr>';
}
echo '</tbody></table>';
}

如能提供帮助，将不胜感激。

Answer 1

获取单元格，对其进行迭代，获取数字，与零进行比较以查看是否为负/正，设置颜色，完成...

var cells = document.querySelectorAll('#tableID td');

for ( var i=0; i<cells.length; i++ ) {
    var cell    = cells[i];
    var html    = cell.innerHTML;
    var changed = html.replace(/([+-]?(\d|\.)+)/, function(x) {
        var color = (+x) < 0 ? 'red' : 'green';
        return '<span style="color: ' + color + '">' + x + '</span>';
    });

    cell.innerHTML = changed;
}

FIDDLE

Answer 2

如果您不想在后端处理，并且您确信负号（-）仅用于数字，您可以尝试这个

  var table = document.getElementById('tableID'),
  cells = table.getElementsByTagName('td');

  for (var i = cells.length - 1; i >= 0; i--) 
  {
    if( cells[i].innerHTML.indexOf('-') !== -1 )
      cells[i].style.color = 'red';
    else
      cells[i].style.color = 'green';
  }

Answer 3

我会这样做：

var cells = document.querySelectorAll("table td");
for (var i = 0, len = cells.length; i < len; i++) {
  var num = parseInt(cells[i].innerHTML.split("(")[1].split(")")[0]);
  if (num < 0) {
    cells[i].style.background = "red";
  } else {
    cells[i].style.background = "lightgreen";
  }
}

这里是 JSFiddle 演示

另请注意，您可以使用 document.querySelectorAll 直接查找元素。