Ereignis ausführen nur auf gezeigter Tabellenzeile

[gianfranco0104]

Stehe mal wieder vor einem Problemchen:
Ich habe hier einen Script (jQuery), welcher einen "langen Klick", bzw. langen TAB (Finger) erkennt und dann ein Ereignis ausführt. wenn ich das mit einem Beliebigen Element mache, welcher eine ID zugewiesen bekommen hat, klappt das auch wunderbar.
Allerdings möchte ich, dass, wenn auf eine Tabellenzeile dieses ausgeführt wird anwenden. dort klappt es nicht. auch nicht, wenn ich der Zeile eine ID gebe. was mache ich falsch? Hier nur mal der Code für das LangKlicken und die ID, welche auf die Tabelle muss.:

  <script type="text/javascript">
  $(window).load(function(){
        var canvas = document.getElementById('tr.expTable'); //Tabellenzeilen-ID, die angesprochen werden soll
        var timer = null;
        canvas.onmousedown = function(){
          console.log('click');
           timer = setTimeout( expcharmbar, 1500 );
        };
        canvas.onmouseup = function(){
          clearTimeout( timer );
        };
  
  
   });
   function expcharmbar() {
          alert('erkannt')
        }
  </script>

und hier der Tabellenstyle

#expTable td {
    border-collapse: collapse;
    border-bottom: 1px solid #B4B4B4;
    }

tr.expTable {
    display:block;

}
    tr:hover{
        background:#DCDCDC;
    }

DIe Tabelle wird dynamisch erzeugt, daher wird es schwer jeder Zeile eine ID zu geben. Wenn die Maus drauf zeigt wird über HOVER die Farbe geändert. Bleibt die Maus, bzw. der Finger länger gedrückt, sollte der Javascript Code starten.

 

[SpiceLab]

  <script type="text/javascript">
...
        var canvas = document.getElementById('tr.expTable'); //Tabellenzeilen-ID, die angesprochen werden soll
...
  </script>

und hier der Tabellenstyle

...
tr.expTable {
    display:block;
}
...

Der Punkt zwischen tr u. expTable steht nicht für einen ID-, sondern Klassen-Bezeichner. Somit kann die zitierte JS-Zeile mit der getElementById()-Methode auch nicht funktionieren.

 

[gianfranco0104]

ok. aber getElementByClass gibt es ja nicht wirkl. was für eine lösung gibt es hier? expTable ist ursprünglich aber eine ID.

 

[SpiceLab]

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

 

[Parantatatam]

Doch, also nicht ganz. Es gibt die Methode getElementsByClassName

 

[SpiceLab]

@einfach nur crack Doppelt hält besser

 

[gianfranco0104]

Danke mal, theoretisch müsste es dann so ausschauen, klappt aber nicht:

$(window).load(function(){
        var canvas = document.getElementById('expTable').getElementsByClassName('tr');  
        var timer = null;
        canvas.onmousedown = function(){
          console.log('click');
           timer = setTimeout( expcharmbar, 1500 );
        };
        canvas.onmouseup = function(){
          clearTimeout( timer );
        };       
       
   });
   function expcharmbar() {
          alert('erkannt')
        }

 

[SpiceLab]

tr repräsentiert auch keinen Klassenamen, sondern das HTML-Element für eine Tabellenzeile

 

[gianfranco0104]

verstehe, dann kann ich es auch nicht mit einer Klasse machen, letztendlich stehe ich wieder am Anfang
Es muss doch eine Möglichkeit geben der Function zu sagen, dass die Zeile, welche momentan auch angezeigt wird jetzt "dran" ist. Mit allen anderen Elementen funktioniert es genauso und super simpel, nur mit der Tab-Zeile nicht.

 

[Parantatatam]

Wenn Du ein Element bei seinem Tag ansprechen willst, dann gibt es auch dafür eine Methode: getElementsByTagName