Toggle class of Table Row

Question

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.

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

A row can only be 1 of the 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>

Thanks in advance.

Answer 1

Hi,

Don't replace the odd or evn classes with selected. An element may have more than 1 classes so add the selected class so you would have odd selected when selected and just odd when not selected. Use indexOf on the className property to see if the element has the selected class or not. Add it with += ' selected' and remove it with replace.

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

Answer 2

By using jquery its simple.

$("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

EDIT

Without using jquery you can do like as follows.

 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

Answer 3

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.

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.