javascript 表行的切换类

Toggle class of Table Row

提问by Mose

I'm trying to write a javascript that will toggle the class of a table row on the onClick event so that I can use css to change the look and functionality of it, however I'm not quite sure how to accomplish this.

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

The goal is to have a table in which users can select a row and have it highlight, and should they select another row the previous selection return to its original class. The table rows have alternating colors, and I am unsure how to get this to work the way I like.

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

The 3 css classes are: evn odd selected

3 个 css 类是： evnodd selected

A row can only be 1 of the 2:

一行只能是 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>

Thanks in advance.

提前致谢。

采纳答案by Steve Claridge

I think you need to:

我认为你需要：

1. Remove the selected class from the previously selected element (if it was set)
2. Add it to the current selection.

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

something like this would do it:

像这样的事情会做到：

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

The above could be hugely improved! It works but consider it more as pseudo-code for illustration.

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

回答by ArK

By using jquery its simple.

通过使用 jquery 很简单。

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

For more info addclass, remove class

有关更多信息addclass，删除类

EDIT

编辑

Without using jquery you can do like as follows.

在不使用 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';
 }

note : set id for your table as tblid

注意：将表的 id 设置为 tblid

回答by Alin Purcaru

Don't replace the oddor evnclasses with selected. An element may have more than 1 classes so add the selectedclass so you would have odd selectedwhen selected and just oddwhen not selected. Use indexOfon the classNameproperty to see if the element has the selectedclass or not. Add it with += ' selected'and remove it with replace.

不要用 替换odd或evn类selected。一个元素可能有 1 个以上的类，因此请添加selected类，以便odd selected在选择时和odd未选择时都有。indexOf在className属性上使用以查看元素是否具有selected类。添加+= ' selected'并删除它replace。

Note that this requires you to change you class definition for selecteda little, but this is the right way to do what you need.

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