javascript - 表行的切换类

Question

我正在尝试编写一个 javascript，它将在 onClick 事件上切换表行的类，以便我可以使用 css 来更改它的外观和功能，但是我不太确定如何实现这一点。

目标是有一个表格，用户可以在其中选择一行并突出显示，如果他们选择另一行，则先前的选择将返回到其原始类。表格行有交替的颜色，我不确定如何让它按照我喜欢的方式工作。

3个css类是:
evn
奇怪的
选中

一行只能是 2 个中的 1 个:

<script>
function toggle(elem) {
  selectClass = 'selected';
  orgClass = document.getElementById(elem).className;
  elem.className = (elem.className == 'selectClass)?orgClass:selectClass;
}
</script>
<table>
<tr class='evn' id=0 name='rowsel' tabindex=0 onClick='toggle(this);'>
  <td>something</td>
  <td>something else</td>
</tr>
<tr class='odd' id=1 name='rowsel' tabindex=0 onClick='toggle(this);'>
  <td>something</td>
  <td>something else</td>
</tr>
<tr class='evn' id=2 name='rowsel' tabindex=0 onClick='toggle(this);'>
  <td>something</td>
  <td>something else</td>
</tr>
</table>

提前致谢。

Answer 1

我认为你需要:

从先前选择的元素中删除选定的类(如果已设置)

将其添加到当前选择。

像这样的事情会做到:

    function toggle(elem) {
        var allelems = document.getElementsByClassName( "odd" );
        for (var i = 0; i < allelems.length; i++ )
        {
            allelems[i].className = allelems[i].className.replace( "selected", "" );
        }
        var allelems = document.getElementsByClassName( "evn" );
        for (var i = 0; i < allelems.length; i++ )
        {
            allelems[i].className = allelems[i].className.replace( "selected", "" );
        }

        elem.className += " selected";
    }

以上可以大大改善!它有效，但更多地将其视为用于说明的伪代码。