Question

我想通过更改背景颜色和文字颜色来突出显示表格中的行。更改背景颜色工作正常，但文本颜色不正常。我的代码有什么问题，文字颜色在onClick上没有改变？

的script.js

var preEl ;
var BColor;
var TColor;

function highlight(el){             // funkcia pre zvyraznenie riadkov
  if(typeof(preEl)!='undefined') {
     preEl.text=TColor;
     preEl.bgColor=BColor;
  } 
  TColor = el.text;
  el.text = '#FF0000';  
  BColor = el.bgColor;
  el.bgColor = '#FF3333';  

  preEl = el;
}

表

<table>
<tr  onClick="highlight(this);" >
        <td>Ferrari F138</td>
        <td>1 000€</td>
        <td>1 200€</td>
        <td>Model monopostu stajne Scuderia Ferrari pre sezónu 2013</td>
        <td>1</td>
        <td>F138</td>
        <td>Klik pre detaily</td>
</tr>
</table>

Answer 1

试试这个

var preEl ;
var BColor;
var TColor;

function highlight(el){             // funkcia pre zvyraznenie riadkov
   if(typeof(preEl)!='undefined') {
     preEl.style.color = TColor;
     preEl.style.backgroundColor = BColor;
   } 
   TColor = el.style.color;
   el.style.color = '#FF0000';  
   BColor = el.style.backgroundColor;
   el.style.backgroundColor = '#FF3333';  

   preEl = el;
}

Answer 2

这一行：

el.text

应该是

el.style.color

但我建议改为转换类名。它会使代码更清晰：

function highlight(el) { // funkcia pre zvyraznenie riadkov
    el.className = el.className === 'selected' ? '' : 'selected'
}

CSS：

.selected {
    background-color: #FF3333;
    color: #FF0000;
}

http://jsfiddle.net/Z22NU/

UPD

一次只允许选择一行：

function highlight(e) {
    if (selected[0]) selected[0].className = '';
    e.target.parentNode.className = 'selected';
}

var table = document.getElementById('table'),
    selected = table.getElementsByClassName('selected');
table.onclick = highlight;

http://jsfiddle.net/Z22NU/1/

Answer 3

尝试别的东西。使用css和event delegation。

在css中创建一个类：

tr.highlighted {
 background: #FF3333;
 color: #FFF000; /* #FF0000 is almost the background color */ 
}

在你的js文件中创建一个监听器函数：

function highlight(e){
      e = e || event;
      var from = findrow(e.target || e.srcElement)
         ,highlighted = from ? /highlighted/i.test(from.className) : false;
      if (from) 
        from.className = !highlighted ? 'highlighted' : '';
}
// findrow: find parent tr tag of the clicked Element
function findrow(el){
      if (/tr/i.test(el.tagName))
        return el;
      var elx;
      while (elx = el.parentNode) {
        if (/tr/i.test(elx.tagName)) {
            return elx;
        }
      }
      return null;
}

最后为表元素分配一个点击处理程序：

document.querySelector('table').onclick = highlight;

请参阅此jsFiddle

突出显示表格行和更改文本颜色

3 个答案:

UPD