Question

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

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

3个css类是： EVN 奇选择

一行只能是2中的一行：

<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

通过使用jquery简单。

$("tr").removeClass("selected"); // Removes 'selected' class from all tr element
$("#id2").addClass("selected"); // adds 'selected' class to #id2 element

了解详情addclass，remove class

修改

不使用jquery，你可以这样做。

function toggle(elem){ trele=document.getElementById('tblid').getElementsByTagName('TR'); var classname; for(var i=0;i<trele.length;i++) { classname=trele[i].className; trele[i].className=classname.replace("selected",""); } elem.className+=' selected'; }

注意：将表的ID设置为tblid

Answer 2

我认为你需要：

从先前选定的元素中删除所选的类（如果已设置）
将其添加到当前选择中。

    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";
    }

以上内容可以大大改善！它可以工作，但更多的是将其视为伪代码。

Answer 3

请勿将odd或evn类替换为selected。一个元素可能包含多个类，因此添加selected类，以便在选中时odd selected，而在未选中时只odd。在indexOf属性上使用className查看该元素是否具有selected类。使用+= ' selected'添加，然后使用replace将其删除。

请注意，这需要您稍微更改selected的类定义，但这是执行所需操作的正确方法。

切换表行的类

3 个答案: