Question

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

onmouseover突出显示整行一种颜色
点击该行突出显示该行的另一种颜色（如果再次单击同一行，则不会突出显示该行 - 将其设置为原始bgcolor）
我遇到的一个问题是，在我的listview中，行的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>

Answer 1

onmouseover突出显示整行一种颜色

将:hover添加到tr个样式

点击该行突出显示该行另一种颜色（如果再次点击同一行，则会突出显示该行 - 将其设置为原始行 BGCOLOR）

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

并为其添加样式。

我遇到的一个问题是，在我的listview中，行的bgcolor在两种颜色之间交替显示。

您可以将:nth-child(2n)添加到您的样式中以便一起使用。

示例

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

Answer 2

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

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>

用于突出显示行和切换onclick颜色的javascript

2 个答案: