1

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

脚本.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€&lt;/td>
        <td>1 200€&lt;/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>
4

3 回答 3

1

试试别的。使用 css 和事件委托。

在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

于 2013-04-28T14:32:34.840 回答
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;
}
于 2013-04-28T14:16:09.617 回答
1

这一行：

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/

于 2013-04-28T14:17:30.590 回答