0

我需要能够在 TR 上执行以下操作：

  • onmouseover 突出显示整行一种颜色
  • onclick 该行以另一种颜色突出显示该行（如果再次单击同一行，它将取消突出显示该行 - 将其设置为原始 bgcolor）
  • 我遇到的一个问题是，在我的列表视图中，行的 bgcolor 在两种颜色之间交替。
  • 下面的代码仅适用于一次突出显示一行，该行需要保持突出显示，直到再次单击它。

这是我用来单击以选择哪个有效但我需要更改它以便它打开/关闭行突出显示的一些代码

<script type="text/javascript"> 
var preEl;
var orgBColor;
var orgTColor;
function highlighttr(el, backColor, textColor) {
    if (typeof (preEl) != 'undefined') {
        preEl.bgColor = orgBColor;
        try { ChangeTextColor(preEl, orgTColor); } catch (e) { ; }
    }
    orgBColor = el.bgColor;
    orgTColor = el.style.color;
    el.bgColor = backColor;

    try { ChangeTextColor(el, textColor); } catch (e) { ; }
    preEl = el;
}


function ChangeTextColor(a_obj, a_color) {
    ;
    for (i = 0; i < a_obj.cells.length; i++)
        a_obj.cells(i).style.color = a_color;
}
</script>
4

2 回答 2

2
  • onmouseover 突出显示整行一种颜色

添加:hover到tr样式

  • onclick 该行以另一种颜色突出显示该行（如果再次单击同一行，它将取消突出显示该行 - 将其设置为原始 bgcolor）

    $('tr').click( function () {
    if($(this).hasClass("clicked"))
    {
        $(this).removeClass("clicked");
    }else{
        $(this).addClass("clicked");
}
});

并为其添加样式。

  • 我遇到的一个问题是，在我的列表视图中，行的 bgcolor 在两种颜色之间交替。

您可以添加:nth-child(2n)到您的样式中以将它们组合在一起。

例子

http://jsfiddle.net/uuZdB/6/

于 2012-06-16T11:21:45.493 回答
1

这是一种传统的方式，顺便说一下是跨浏览器（和平台）。

CSS

.tr {background-color:#fff}
.trOver {background-color:#ddd}
.trClicked {background-color:#bbb}

JS

function over(o)
{
    if ('trClicked' != o.className) o.className = 'trOver';
}
function out(o)
{
    if ('trClicked' != o.className) o.className = 'tr';
}
function clicked(o)
{
    o.className = ('trClicked' == o.className) ? 'tr' : 'trClicked';
}

HTML

<tr class="tr" onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">
    // tds without defined background color...
</tr>
于 2012-06-16T11:38:29.570 回答