Beim anklicken Wert aus Tabelle lesen

[may24x]

Hallo zusammen.
Ich beschäftige mich erst seit kurzem mit Javascript und musste (schmerzlich) feststellen das doch einiges anders als in reinem Java läuft.

Im Grunde möchte ich folgendes machen. Ich lasse eine Tabelle - via Bash Script - erstellen. Später soll das mal via PHP gehen aber im Moment ...

Wenn ich nun eine Zeile anklicke, soll immer der Wert der dritten (letzten) Spalte ausgelesen und an an php Script ge-POST-ed werden.

Leider schaffe ich es nichtmal die entsprechende Zeile auszulesen ...

<TABLE border=0>
<TBODY>
<TR><TD><img src="vid/thumbs/001.jpg"></TD>
    <TD class="info"><B>Test1</B></TD>
    <TD class="hide">001.mp4</TD>
</TR>
<TR><TD><img src="vid/thumbs/002.jpg"></TD>
    <TD class="info"><B>Test2</B></TD>
    <TD class="hide">002.mp4</TD>
</TR>
<TR><TD><img src="vid/thumbs/003.jpg"></TD>
    <TD class="info"<B>Placeholder</B></TD>
    <TD class="hide">Placeholder.mp4</TD>
</TR>
</TBODY>
</TABLE>

   <script type="text/javascript">

        var rows = document.getElementsByTagName("TR");
        var vidFile = "";
        for (i = 0; i < rows.length; i++)
           {
            rows[i].addEventListener('click',showCellInfo)
           }

        function showCellInfo()
        {
        alert(rows[i].innerHTML);
        }
   </script>

Jemand 'ne Idee ?
Geht das überhaupt in Javascript ?

PS: Kein jQuery ...

 

[paul schmitz]

Klar ist das in JS möglich.
Hier ist ein Konzept dafür:
- füge jedem TD ein onclick (oder einen Eventhandler) hinzu, das eine Funktion mit einer ID aufruft
- in dieser Funktion holst du die das HTML der entsprechenden Zeile
- teilst diese mit split nach "</TD>"
- nimmst das dritte Element
- und davon alles zwischen > und <

Krieg das erstmal zum laufen, dann kümmern wir und um das POSTen.

Das Problem bei deinem Code ist, dass die Variable i in showCellInfo nicht übergeben wird, und daher als global angenommen wird, und der Anzahl der Zeilen entspricht. Du musst i als Argument übergeben.

 

[kkapsner]

das doch einiges anders als in reinem Java läuft.

JavaScript hat mit Java wenig zu tun. Die einzige Gemeinsamkeit ist der Namesteil und die C-ähnliche Syntax.

Zu deinem Problem: du kannst in einem Event-Listener immer mit this auf die Node zugreifen, auf der das Event registriert wurde. Auch würde ich nie etwas über die exakte Position im DOM irgendwas lokalisieren. Das ist schwer wartbar und fehleranfällig. Das <td> hat doch eine Klasse - dann verwende die doch auch:

<TABLE id="contentTable" border=0>
	<TBODY>
		<TR>
			<TD><img src="vid/thumbs/001.jpg"></TD>
			<TD class="info"><B>Test1</B></TD>
			<TD class="hide">001.mp4</TD>
		</TR>
		<TR>
			<TD><img src="vid/thumbs/002.jpg"></TD>
			<TD class="info"><B>Test2</B></TD>
			<TD class="hide">002.mp4</TD>
		</TR>
		<TR>
			<TD><img src="vid/thumbs/003.jpg"></TD>
			<TD class="info"<B>Placeholder</B></TD>
			<TD class="hide">Placeholder.mp4</TD>
		</TR>
	</TBODY>
</TABLE>

<script>
Array.from(document.querySelectorAll("#contentTable tbody tr")).forEach(function(row){
	row.addEventListener("click", showCellInfo);
});

function showCellInfo(){
	alert(this.querySelector(".hide").innerHTML);
}
</script>

@Paul: dein Konzept ist extrem kompliziert, fehleranfällig und inperformant. Warum über HTML gehen, wenn das DOM schon alles bereitstellt? Auch die Übergabe von i als Parameter ist wenig hilfreich. V.a. da row als globale Variable (bäh) angenommen wird.

 

[may24x]

Hey, vielen Dank, das hat super geklappt

Nur 'ne Frage: wieso "#contentTable tbody tr" ... ? Würde nicht auch "#contentTable tr" ausreichen ?

Noch bezüglich des "sendens an das php Dokument". Geht das "nur" über ein (hidden) Form Element oder auch direkt ?
Wenn jQuery nicht zur Verfügung steht ?

Und wie geht das wenn ich zwei Variablen an das PHP Script schicken will ?

 

[kkapsner]

Würde nicht auch "#contentTable tr" ausreichen ?

Wenn du keinen thead hast oder dort auch der Click-handler registriert werden soll, würde das auch ausreichen.

Geht das "nur" über ein (hidden) Form Element oder auch direkt ?

Das geht auch direkt mit AJAX. Und jQuer brauchst du dafür nicht unbedingt, aber ein Framework hilft dabei schon.

Und wie geht das wenn ich zwei Variablen an das PHP Script schicken will ?

Wieviele Variablen/daten du schickst, ist völlig egal.

 

[may24x]

Vielen Dank euch

Ich hab's jetzt so gemacht:
...

<FORM id="myForm" method="post" action="player.php">
    <input type="hidden" name="v" id="vItem">
    <input type="hidden" name="t" id="vThumb">
</FORM>
...
<script type="text/javascript">
   Array.from(document.querySelectorAll("#vidTable tr")).forEach(function(row){
        row.addEventListener("click", showCellInfo);
        });

   function showCellInfo(){
        var vidFile = this.querySelector(".hide").innerHTML;
        var thumbFile = this.querySelector(".thumb").innerHTML;

        var vFormElement = document.getElementById("vItem");
        var tFormElement = document.getElementById("vThumb");

        vFormElement.value = vidFile;
        tFormElement.value = thumbFile;

        document.forms["myForm"].submit();
        }
   </script>

 

[kkapsner]

Vielen Dank euch

Bitte - gern geschehen.

Ich hab's jetzt so gemacht

Warum sind vidFile, thumbFile, vFormElement und tFormElement globale Variablen?

 

[may24x]

Warum sind vidFile, thumbFile, vFormElement und tFormElement globale Variablen?

Ooops, das ist natürlich falsch ... hab's korrigiert