[Erledigt] JS / jQuery für eine anklickbare Tabellenzeile

Achso. Ne du verstehst das falsch.

also: die Zeile ist komplett anklickbar und soll den Datensatz öffnen der jeweils angezeigt wird in der Zeile. Dafür wird beim Klick auf die Zeile der Button betätigt, der wiederum ist so eingerichtet, dass er Modal das mit dem richtigen Inhalt öffnet. Die Zeile dazu zu bekommen war zu aufwendig bzw. hab ich es auch schlichtweg nicht hin bekommen.

Momentan erscheint beim Klick testweise die ID des Buttons in der letzten Spalte, aber gleichen Zeile. Die ID wird dynamisch ermittelt. Nicht durch klick auf den Button selbst, sondern durch die Zeilennummer und die gleich bleibende Grund-ID.

Der Button wird später ausgeblendet und so versteckt durch Zeilen-Klick aufgerufen. Dafür muss ich die ID immer wieder neu ermitteln. Und dieses gerade neu ermittelte soll direkt in die Funktion eingesetzt werden, damit er überhaupt weiß welchen Button ich möchte.

Genau. Damit hat der Thread hier ja angefangen. Nur gab es da Probleme was die Umsetzung anging. Da ich mit einem Portal-Programm für Intranets arbeite gibt es da Unterschiede. Bspw. auch wie ich HTML anpassen kann. Somit war es dem Zeilen-Klick-Link einfach nicht beizubringen, welche Informationen das aufzurufende Fenster nun haben soll. Waren immer die Inhalte eines anderen Datensatzes zu sehen. Gäbe Möglichkeiten mit sehr weitem, verschachteltem Velocity usw. Das hab ich aber nicht hinbekommen.

Andererseits hatten wir anfangs die Möglichkeit mit href etc. Aber da wollte er einfach nicht modal öffnen sondern hat immer ein neues Fenster genommen. Auch hier war die HTML Anpassung der entsprechende K.O. Punkt.

Die Buttons jetzt sind Marke Eigenbau in Kooperation mit dem Portal-Programm. öffnen zuverlässig, in gewünschter Weise, Modal und mit richtigem Inhalt. So wie es auch bei einem normalen Link der Fall ist. Zudem sind sie viel leichter anzupassen was ihr Verhalten angeht als ein umfassendes Velocity Skript.

Damit diese ganze Zeile nun angeklickt werden kann wird dabei auf die Buttons verwiesen. Jedoch hat jede Zeile individuell einen anderen Button mit verschiedenen Nummern. Diese Ermittlung klappt. Nur bekomme ich es nicht hin nun wieder anders herum zu sagen "hey, bitte nehm jetzt diesen gerade ermittelten Text und nutze ihn um die richtige ID zu suchen und aufzurufen".

Zitat von basti1012

Kuck mal ob du damit was anfangen kannst ,das sollte die funktion sein die du brauchst .fals ich es verstanden habe https://jsfiddle.net/basti1012/wwxefet6/13/

Abgefahren.... Nein das war es nicht. Bzw naja wer weiß. Ehrlich gesagt bin da nun ich mit überfordert.

Dennoch vielen Dank für den Versuch! Wirklich großes Dankeschön für die Mühe.

Zitat von Sempervivum

Wenn ich dich da richtig verstehe, sollte dieses es tun:

[...]

Und genau das war es! Hab das img bei der new ID entfernt, da ich das nicht brauche bei mir:

function zeile(){
var rows = document.getElementById('ID_tablecontrolE1253671').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
        rows[i].addEventListener('click', function() {
            var row = this.rowIndex + 1;
            var idPlus = "_" + row + "_IMG";
            var newId = "ID_imageactioncontrol735BC564" + idPlus;
            $("#" + newId).trigger("click");
            return true;
});
}
}

Größten Dank für die Mühe! Ich bin einfach begeistert. Die Spalten mit den Edit Feldern wurden in eine parallel laufende Tabelle ausgegliedert. Der Verwaltungsbereich hat also ein kleines Manko der nicht ganz durchgängigen hover-Markierung. Aber da seis nun drum. Der normal-Nutzer-Modus läuft bestens.
Wüsste nicht ansatzweise wie ich das Skript hier eingrenze, und das ist die Mühe jetzt auch nicht wert.

Vielen Dank! Schätze ich sehr.

Sieht nun alles erstmal so aus:
Das ein oder andere wird jetzt noch in Ruhe editiert.

Erledigt ~

function cssSortierungDropdownVerwaltung () {

$('.persist-tableheader').contentChange(function(){
    setTimeout(function() {
    cssSortierungDropdownVerwaltungTest ();
    }, 400);
    });

    $cursorHeader();
    $hover();
    $zeile();
}


$zeile = function(){
var rows = document.getElementById('ID_tablecontrolE1253671').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (i = 0; i < rows.length; i++) {
        rows[i].addEventListener('click', function(e) {
            if ($(e.target).closest('a').length) {
            e.preventDefault(); } else {
            var row = this.rowIndex - 2;
            var idPlus = "_" + row + "_IMG";
            var newId = "ID_imageactioncontrol735BC564" + idPlus;
            $("#" + newId).trigger("click");
            return true;  }

});
}
}


$hover = function(){
$('#ID_tablecontrolE1253671 tr').not(':first').hover(function(){
   $('a', this).css('color','white');
 },
function(){
   $('a', this).css('color','#555555');
});
}


$cursorHeader = function(){
    $('.persist-tableheader').css({
    'cursor' : 'default',
    });
}

Edit: Bei jeglicher Änderung wird ein jQueryPlugin benutzt um diese als Auslöser für die Funktion herzunehmen. Damit ist jetzt die richtige Sortierung der klickbaren Zeilen auch nach dem Bedienen der Header gegeben. Durch die Anpassung von rowindex auf -2 stimmt auch der 1. Punkt in der Tabelle wieder.

Edit nochmal: hat sich inzwischen auch erledigt. Sorry.
Lass aber das Script drin, falls jemand mal aus Neugierde was nachlesen will.
Dass auch die erste Zeile im Skript liegt macht nichts. Denn bei klick passiert ohne entsprechenden Button der damit aufgerufen werden kann einfach gar nichts. Ist nicht besonders sauber, aber für den User immerhin nicht zu erkenne. Mit dem dritten jQuery wird der Cursor im Header angepasst damit er sich nicht verhält wie in den anklickbaren Zeilen.

Der Hover wird mit .not(':first') ausgeschlossen und damit die Zeile durchgängig gehovert wird, aber beim klick auf die Icons keine zwei Fenster aufgehen, ist ein entsprechender Skript-Teil eingebaut der Links ausschließt. (preventDefault)