prototypejs - prototypeJS，改变行颜色我“使用”

Question

我正在使用prototypeJS，我想突出显示我点击的记录行......

但是，问题是当我单击第二行时，我希望第一行返回到其原始状态 - 不是我突出显示了 multipls 行，但我只希望突出显示我点击的最后一个

HTML 有一个行 id - 所以我知道我使用的是哪一行。

    <tr id="tblRowThing10434" bgcolor="#DDD">
    <td>10434</td>
    <td>aaa</td>
    <td nowrap="">bbb</td>
    <td nowrap=""><input class="btnSubmit" 
                         type="button" 
                         onmousedown="getAvailableResources( 10434, 'test', 'work' );" 
                         value="Pick" 
                         name="pickThing" ></td>
</tr>
<tr id="tblRowThing33434" bgcolor="#FFF">
    <td>33434</td>
    <td>aaa</td>
    <td nowrap="">bbb</td>
    <td nowrap=""><input class="btnSubmit" 
                         type="button" 
                         onmousedown="getAvailableResources( 33434, 'test', 'work' );" 
                         value="Pick" 
                         name="pickThing" ></td>
</tr>

脚本看起来像这样

function getAvailableResources( a, b, c ) {
    elem = 'tblRowLoad' + a;
    $( elem ).setStyle({ backgroundColor: '#fff' });

    //other 'work'
}

Answer 1

我建议使用简单的css：

.activeRow { background-color:#fff; }
/** in case you are using dirty inline css, add !important here but be ashamed pls */

在您的javascript中结合一些方便的功能：

function getAvailableResources( a, b, c ) {
    elem = $('tblRowLoad' + a);

    /** clear all rows */
    elem.siblings().invoke('removeClassName', 'activeRow');
    /** highlight current row */
    elem.addClassName('activeRow');

    //other 'work'
}

---

如果这不起作用 - （例如，因为您没有使用类作为背景颜色并且无法更改它（您应该这样做！）） -在颜色代码 (#fff) 之后添加!important类.activeRow。

Answer 2

您可以解决所有的<tr>兄弟姐妹并更改所有样式，然后更改当前行背景

所以从这里改变你的javascript函数

function getAvailableResources( a, b, c ) {
    elem = 'tblRowLoad' + a;
    $( elem ).setStyle({ backgroundColor: '#fff' });

    //other 'work'
}

对此

function getAvailableResources( a, b, c ) {
    elem = 'tblRowLoad' + a;

    $(elem).siblings().invoke('setStyle',{ backgroundColor: '' });
    //reset background color by setting to an empty string ''

    $( elem ).setStyle({ backgroundColor: '#fff' });

    //other 'work'
}