突出显示表格行并更改文本颜色答案

【问题标题】：Highlighting table rows and changing text color突出显示表格行并更改文本颜色
【发布时间】：2013-04-22 05:32:48
【问题描述】：

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

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>

【问题讨论】：

标签： javascript html html-table highlight

【解决方案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;
}

【讨论】：

【解决方案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/

更新

一次只允许选择一行：

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/

【讨论】：

谢谢它有效，但我只需要同时突出显示一行：/
对不起，它适用于 jsfiddle，但是当我将它复制到我的文件时它不起作用。我正在使用 Xampp。 :(
您在控制台中看到什么错误？确保所选变量可在高亮功能中访问。尝试在其中移动 selected 声明。
表为空：selected = table.getElementsByClassName('selected');点击行后，选择的是 udefined: if (selected[0]) selected[0].className = '';
你应该给表格一个id，在我的例子中我设置了id="table"，相应地改变你的HTML。

【解决方案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

【讨论】：