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

  • Hallo!


    Über das hier bestehende Portal-Programm habe ich eine Tabelle aufgebaut und CSS mäßig bearbeitet und bin noch dabei. Bspw. wird Spalte eins in der Schrift und Hover Reaktion noch anders. Pointer als Maus usw. Also ziemlich gut gelaufen und bis hierhin in Ordnung.

    Ergebnis im Anhang.


    Aber:

    Das Programm sieht es vor bestimmte Spalten zu definieren welche als Link fungieren. Nun Wollte ich aber, deswegen auch der Pointer, die ganze Tabellenzeile anklickbar machen. Nach kurzem googlen gibt es einige Lösungen. Nun ist es aber in meinem Fall nicht so einfach das HTML der Tabelle anzutasten. Einfacher wäre ein zusätzliches JS, welches den Job erledigt.

    Code
    1. JS
    2. $("tr[link]").css("cursor","pointer");
    3. $("tr[link]").bind("click", function(){
    4. var link = $(this).attr("link");
    5. window.location.href = link;
    6. });
    7. HTML
    8. <tr link="/product.php?ver_id={$value.ver_id}" ......>

    Bsp. das ^ habe ich gefunden.

    Ohne groß zu erklären was und wieso an dem Programm hier mich einschränkt, die Frage:
    Wenn meine Tabelle nun schon besteht und auch der Hover funktioniert, was muss ich nun als JS angeben um letztendlich nur noch den Link aus Spalte 1 über die ganze Breite der Tabelle zu ziehen.


    Hoffe man versteht irgendwie was ich meine.


    Musste mich an euch wenden, da das Portal-eigene Forum wie so oft nicht hilfsbereit ist und alles ignoriert. Kann gut sein, dass ich an das Ergebnis nicht komme da das Portal mich zu stark einschränkt.


    Links zu dem was ich gefunden hatte:
    http://www.tiptom.ch/homepage/bsp/zellelink.html#js
    http://www.tiptom.ch/homepage/faq.html?q=zellelink

  • Ja hast du richtig verstanden, danke. Auf der Seite die ich verlinkt habe sieht man es auch unten schön. Eine Tabelle in der automatisch ein Link der in dieser Zeile vorhanden ist komplett die ganze Linie durchzieht.


    Edit: Also einbinden kann ich es zwar, aber dann hab ich zwei Probleme:

    1. Das Skript reagiert bei allen Clicks mit Pointer auf dieser Seite

    2. Wie binde ich den eigentlich Link ein?


    Also jetzt versucht er einen nicht vorhanden Link zu öffnen, im Skript ist ja auch keiner, klar. Wie schreib ich es, dass er beim Klick sich verhält als würde er den Link in der 1. Spalte anklicken? Dieser ruft eine Seite modal auf. Variabler Inhalt je nach Datensatz der Zeile.


    Mein "Versuch". Nach blättern im schlauen Buch mit wenig (keiner) Ahnung meinerseits

    Code
    1. $('#tablecontrolE1253671').click(function(){
    2. var link = $('#textvcontrol4F514A3E').attr("href");
    3. open(link)
    4. });

    tablecontrol ist die Tabelle um die es geht
    textvcontrol das Element in der ersten Spalte in welchem der Link ist


    Stimmt so nicht, aber mein Wissen reicht noch nicht aus für mehr.

  • Mein Erklärung ist auch einfach nicht der Bringer...

    ja das war gemeint. Ist schon mal der 1. Schritt. Hatte das zwar bedacht aber falsch geschrieben.


    Jetzt geht es um denk Link. Habe es geschafft den Link wie in der 1. Spalte angegeben einzubauen.
    Sieht nun so aus:

    Code
    1. $("#ID_tablecontrolE1253671 tr").css("cursor","pointer");
    2. $("#ID_tablecontrolE1253671 tr").click(function(){
    3. location.href = $(this).find('td a').attr('href');
    4. open(link);
    5. });

    Probleme:
    1. Skript wird erst aktiv nachdem ein Link erstmal manuell aufgerufen und geschlossen wurde.

    Könnte man zur Not mit einem Onload erledigen welches diese Aktion mit einem versteckten Fenster bei Aufruf aufführt. Aber denke irgendwas ist einfach falsch im Skript. Wäre mir lieber als Funktionen die dann doch wieder Ärger machen.


    2. Angelegt ist es ursprünglich, dass Links modal geöffnet werden. Das Skript öffnet den Link jedoch direkt im Fenster.

    Ich weiß, dass Modal ein Begriff ist den das Skript kennen sollte, aber ich weiß nicht wo im SKript ich nun etwas wie ".modal" oder ".open-modal" unterbringen sollte.


    Gefunden aber leider nicht funktional, oder ich setze es falsch ein:

    Anstatt .click(function):


    Code
    1. $(document).on("click", ".open-modal", function () {
  • hast du den schon ein modal script? dann poste den mal dann baue ich das irgendwie zusammen . Wenn du noch keine modal hast dann suche ich mir was zurecht .. aber wasmeinst du das das script erst aktiv wird nach den ersten klick?? das script soll doch beim klicken ein link öffnen .das ist doch richtig.. oder meinst du das die zeile erst dann nacch den ersten klick die farbe ändert bzw das die maus zum pointer wird ,oder wie soll ich das verstehen

  • hast du den schon ein modal script? dann poste den mal dann baue ich das irgendwie zusammen . Wenn du noch keine modal hast dann suche ich mir was zurecht .. aber wasmeinst du das das script erst aktiv wird nach den ersten klick?? das script soll doch beim klicken ein link öffnen .das ist doch richtig.. oder meinst du das die zeile erst dann nacch den ersten klick die farbe ändert bzw das die maus zum pointer wird ,oder wie soll ich das verstehen

    Nein also. Beim klicken passiert gar nichts. Erst wenn ich einmal einen der Links in der 1. Spalte anklicke, das modal öffnen lasse und wieder schließe, dann greift ab nun das Skript bei jedem Klick auf die Zeile. Leider dann aber nicht modal, weil selbst gebaut.


    Code
    1. guid="BC1DD7799C50710248A8711954A1C100C5C6482C" name="textvcontrol4F514A3E" binding="datafield" closable="false" dynamic-width="false" encode="true" filter-script="true" hidden="false" jump-to-child="false" lengthlimit="-1" link="true" link-datafield="FD4B3D8DE44A9B0D2AF1F9266836E97D165E46EF" link-target="E1023870EA70BC4650C1112A97D43FAA8E3D8BFF" link-targetapp="7F613973A40ABFE26BCDC044403526228471668A" linktype="0" modal="true" moremarker="..." mouseover-tooltippopup="false" rect="0,0,100,20" sendemail="false" show-empty-string="true" showtitle="false" text-if-no-perm="false" tooltippopup="true">

    Das ist der Code zur ersten Tabellenspalte. Man sieht tooltippopup=true und modal=true

    Mehr kann ich dir leider auch nicht sagen.


    Hier eine super Diskussion zu modal:
    https://stackoverflow.com/ques…-of-new-tab-or-new-window

    daher hatte ich auch das .on([...] vorhin. Leider weiß ich noch nicht mit umzugehen.

    Code
    1. $(document).on("click", ".open-modal", function () {

    Wenn ich das bei mir einfüge juckt es ihn so ziemlich gar nicht.

  • hast du mal ein link zu dein modal script? oder hast du dir selbst eins geschrieben?

    Verstehe ehrlich gesagt nicht was du meinst.

    also in meinem Beitrag oben sieht man die 1. Tabellenspalte. Die ist so eingestellt, dass sie Modal aufruft. Rauskommen tut das.. (Anhang)


    Durch class = TTModal ist die Art des Tooltips bestimmt.
    Wie mal erwähnt, muss ich nicht alles selber schreiben. Es bleibt viel Arbeit am Portal Manager. Dementsprechend musste ich auch nie ein JS für modales öffnen anlegen sondern wählte es bequem aus. Nur brauch ich dieses mal ein manuelles Ansprechen.

  • Dazu bin ich noch nicht gut genug .Wenn ich das Modal hier hätte könnte ich damit was bauen . aber nur mit den obrigen code kann ich nix anfangen. Die anderen vielecht schon die haben mehr ahnung. Wie gesagt wenn ich das Modal script hier hätte würde ich das hinbekommen aber so kann ich da nix machen .

    Daas das modal erst nach den zweiten klick reagiert ist wohl nur nee kleinigkeit ,die ich aber so nicht rausfinden kann.

    Vieleicht rufen wir mal nach Sempervivum der kann dir so bestimmt besser helfen als ich ?

  • Es ist ein Intranet, nicht einzusehen. Habe meine Beiträge entfernt, inzwischen ist der Plan A, B, C und viele weitere verworfen. Nenne es nun DynP01


    Neues Skript, neuer Plan: Jede Zeile verfügt über eine Schaltfläche die genau tut was sie soll: Modal mit richtigem Inhalt den Datensatz öffnen.


    Um die ID dynamisch zu ermitteln habe ich dieses Skript gebaut. wie man sieht noch mit Lücke. Ich bekomme zuverlässig beim Klick auf die Zeile eine ID heraus, welche genau der ID des Buttons in der jeweiligen Zeile entspricht. Bspw. ID_imageactioncontrol735BC564_4_IMG für Zeile 4.


    Nur: Wie bekomme ich es hin, genau diese ermittelte ID (ist ja nur Text innerhalb einer Variable bis hierhin) am Ende des Skriptes als ID zu nutzen?

  • Wenn du die doch n einer Variable hast,kannst du die doch überall mit hin nehmen. Oderim array Speichern ,oder session.Storage(). Gibt bestimmt noch andere möglichkeiten .Wenn man dasScript sehen würde könnte man was genaueres sagen . Musst nur sagen von wo bis wohin es muss. Aber eigentlich ist dasso ja kein problem mit diesen methoden.


    EDIT : man könnte auch in data-Attributen speichern

  • Nein nein es soll gar nicht raus. Am Ende des Skriptes soll ein Button mit der gerade ermittelten ID angeklickt werden:

    var oButton = getElementById( [..] ermittelte ID [...] ).onclick();


    Du siehst oben wie das Skript nach dem klick erstmal die ID ermittelt, und am Ende soll es die gerade ermittelte ID nun auch nutzen. Habe versucht die variable als ByID(newId).onclick, oder ähnliches, anzugeben. Ohne Erfolg


    Danke!

    PS: Was heißt "wenn man das Skript sehen würde"? Hab das doch in meinem Beitrag oben drin?

  • Das ganze Script meine ich damit ich das verstehe .

    Meinst du diese Zeile.

    Code
    1. var oButton = getElementById( [..] ermittelte ID [...] ).onclick();

    Sollte so sein?

    Code
    1. var oButton = document.getElementById(idPlus).onclick(alert(this));

    Ansonsten lasse ich es ,wie gesagt wenn ich nicht alles sehe verstehe ich es meistens nicht.Da sind die anderen besser in denkenals ich

  • Tut mir leid, aber das ist das ganze Skript. Länger ist das JS nicht. Das Skript von der Tabelle hilft dir wenig. Anbei ein Bild als Erläuterung vielleicht.


    Ein alert brauche ich nicht. Das hatte ich nur für mich drin damit ich kontrollieren kann ob er die richtige ID bastelt. Wie im Screenshot im Anhang zu sehen klappt es. Beim Klick auf die Zeile kommt genau die richtige ID zurück. Die ID will ich aber nicht als alert sondern, wie du richtig gesehen hast, im Skript und aufrufen.


    Aber: Die variable bei getElementById einzusetzen hilft nicht. Damit kann er nichts anfangen. Genau da liegt mein Problem.

    Würde ausgefüllt so aussehen:

  • Ja ich verstehe das nicht ,da hast du recht,weil wenn der alert die id ja anzeigt kannst du damit ja auch arbeiten.Deswegen warten wir mal aus Sempervivum der kann das besser .

    Ich verstehe auch die zeile nicht

    Code
    1. var oButton = getElementById(newId).onclick();

    Sollte vor getElement nicht ein document bzw was anderes stehen? Deswegen komme ich da auch nicht weiter weil ich nicht weiss was da los ist .

    Nagut wie gesagt bin auch noch nicht so weit .Warten wirmal bis sempervivum oder wer anders da ist,die machen das schon

  • also der Sinn ist: Ich habe die Tabelle und möchte wenn ich auf die Zeile klicke auf den Button klicken der in dieser Zeile liegt. Darum ermittelt das Skript erst einmal die Zeile und fügt die Zeilennummer in die ID. Denn genau daraus besteht die ID in jeder Zeile individuell.

    Danach will ich den Button mit genau der ID aufrufen. getElementById wäre genau der richtige Aufruf wenn ich ID_imageaction.._1_IMG direkt aufrufen würde. Deswegen hab ich es mit der Variable auch so gelassen. Vermute aber, dass genau das der Fehler ist. Alle anderen Kombis haben bisher aber auch nichts gebracht.

    Danke trotzdem!

  • Ja wie gesagt verstehe das nicht .du hast in jeder zeile ein button.Wenn man ihn klickt ,sol er die id der zeile annehmen? Oder soll die id der zeile weiter verarbeiten.


    und dies getElementById ,kenne ich ohne document bzw irgendwas anderes davor nicht . habe das zwar versucht hinzubekommenwas du da gepostet hat ,aber ohne document davor weissich nicht wie .Aber egal verstehe ja auch nicht was der button machen soll ,ob der button in der zeile ne X beliebige id hat ,oder die aus der zeile ermittelten daten haben soll.Das doofe ist ja,wenn man einen button ohne id clickt ,wie soll er dann die Id bekommen die er verarbeten soll???


    Wie gesagt ,das ist alles zu hoch für mich .Deswegen sage ich immer ich muss alles sehen damit ich es verstehe.

    Aberwie gesagt ,warten wir mal auf die anderen ,die sind nicht so dumm wie ich ,die verstehen das besser.