Question

我有一个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

我和Tushar有同样的看法。如果动态生成此表，则基于该值向<td>添加类非常容易。如果不是手动生成表，则可以应用相同的表。

如果您仍想使用Javascript（我不赞成）完成此操作，您可能需要确保数值仅在<td>内，以便您可以检查其值并为其父级分配一个类

可以在样式中预定义类以提供不同的颜色..

Answer 3

如果您不想在后端处理它并且您确信字符否定（ - ）将仅用于数字，则可以尝试此操作

  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 4

我就是这样做的：

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";
  }
}

Here is the JSFiddle demo

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

Javascript更改文本颜色

4 个答案: