Klasse der Tabellenzeile umschalten

Question

Ich versuche, ein Javascript zu schreiben, das die Klasse einer Tabellenzeile auf dem onClick-Ereignis umschalten wird, so dass ich css verwenden kann, um das Aussehen und die Funktionalität zu ändern, aber ich bin nicht ganz sicher, wie dies zu erreichen.

Das Ziel ist eine Tabelle, in der die Benutzer eine Zeile auswählen können, die dann hervorgehoben wird, und wenn sie eine andere Zeile auswählen, kehrt die vorherige Auswahl in ihre ursprüngliche Klasse zurück. Die Tabellenzeilen haben abwechselnde Farben, und ich bin mir nicht sicher, wie ich das so hinbekomme, wie ich es möchte.

Die 3 css-Klassen sind: evn ungerade ausgewählt

Eine Zeile kann nur 1 von 2 sein:

<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>

Vielen Dank im Voraus.

Answer 1

Durch die Verwendung von Jquery ist es einfach.

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

Für weitere Informationen addclass , Klasse entfernen

EDIT

Ohne jquery zu verwenden, können Sie wie folgt vorgehen.

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

Hinweis: Setzen Sie die ID für Ihre Tabelle als tblid

Answer 2

Ich glaube, das müssen Sie:

1. Entfernen Sie die ausgewählte Klasse aus dem zuvor ausgewählten Element (falls sie festgelegt wurde)
2. Fügen Sie es der aktuellen Auswahl hinzu.

etwas in dieser Art würde es tun:

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

Die oben genannten Punkte könnten erheblich verbessert werden! Es funktioniert, aber betrachten Sie es eher als Pseudocode zur Veranschaulichung.

Answer 3

Ersetzen Sie nicht die odd ou evn Klassen mit selected . Ein Element kann mehr als 1 Klasse haben, also fügen Sie die selected Klasse, so dass Sie Folgendes haben würden odd selected wenn ausgewählt und nur odd wenn nicht ausgewählt. verwenden indexOf über die className Eigenschaft, um zu sehen, ob das Element die selected Klasse oder nicht. Fügen Sie es mit += ' selected' und entfernen Sie sie mit replace .

Beachten Sie, dass dies eine Änderung der Klassendefinition für selected ein wenig, aber das ist der richtige Weg, um das zu tun, was Sie brauchen.