✔ PHP Datenbanktabelle mit Javascript 'onclick' Funktion?

P

Päto

Grünschnabel
Hallo!

Ich habe folgendes Problem:
Und zwar lasse ich mir aus einer PostreSQL Datenbank, Datensätze mittels PHP in einer Tabelle als assoziatives Array ausgeben. Mein Wunsch wäre es jetzt, dass wenn ich auf eine Tabellenzelle klicke, der Wert dieser Zelle in einer Variable gespeichert wird, die ich in weiterer Folge an Javascript weitergeben kann.
Nur weiß ich nicht so recht, ob und wie ich das umsetzen kann. Kenn mich jetzt mit Javascript leider nicht so gut aus, aber ich muss wahrscheinlich irgendwo im <td> Tag ein 'onclick' und getelementbyid einbauen, das hat bis jetzt bei mir aber leider nicht geklappt. Ich hoffe ihr könnt mir helfen.

Der entscheidende Codeausschnitt sieht folgendermaßen aus:

PHP: 
.....PHP code...

while($row = pg_fetch_assoc($ergebnis)) {

				printf ("<tr><td>%s</td><td>%s</td></tr>", 
				$row['x'], $row['y']);
}
 
Wenn du den Wert der Zelle direkt an die Funktion übergibst, dann würde es in etwa so aussehen:


HTML: 
<script language="javascript" type="text/javascript">
function test (wert) {
	alert (wert);
}
</script>

<table border="1" cellpadding="5" cellspacing="0">
	<tr>
		<td onclick="test(1);">Zelle 1</td>
		<td onclick="test(2);">Zelle 2</td>
		<td onclick="test(3);">Zelle 3</td>
		<td onclick="test(4);">Zelle 4</td>
	</tr>
</table>

Du müsstest dann halt die Werte 1, 2, 3 und 4 dürch deinen Datenbankinhalt ersetzen. Aber das dürfte ja klar sein.
 
Hey!

Zunächst mal danke für die schnelle Antwort ;) Das Problem bei mir ist, dass ich den Wert als Variable benötige.
Konkret geht es bei mir darum, dass ich die x- und y Koordinaten zu bestimmten Orten aus meiner Datenbank in Variablen speichern möchte und diese dann an eine schon bestehende OpenLayers Funktion übergeben möchte, um in weiterer Folge, wenn ich auf die Tabellenzelle klicke, meinen Zoompunkt der Karte an dieser bestimmten Stelle zu setzen.
Das Ganze habe ich bis jetzt so realisiert, dass das Datenbankarray durchlaufen wird und ich mir den letzten Wert in php Variablen schreiben lasse, die ich dann in Javascript aufgreife und verarbeite (siehe Code):

HTML: 
.........
<table style="width: 300px" cellspacing="0" cellpadding="0"> 	

<tr>    
   <th> 
        Bezirk
   </th>
   <th>
	Ort
   </th>
</tr>

PHP: 
......
db connection...................
......
SELECT FROM table..........
.........

while($row = pg_fetch_assoc($ergebnis)) {
				printf ("<tr><td>%s</td><td>%s</td></tr>", 
				$row['bezirk'], $row['ort'], $row['x'], $row['y']);

				$lat = $row['x'];
				$lon = $row['y'];
			    }

Javascript: 
<script type="text/javascript"> 

function init() {
........
	var lat = "<?php echo $lat; ?>";
	var lon = "<?php echo $lon; ?>";
  
........
}
.......

</script>

Jetzt würde ich eben gerne die Variablen 'lat', 'lon' erst beim Mausklick auf die entsprechende Zelle meiner Tabelle füllen und nicht, so wie bisher, mit dem letzten Wert des durchlaufenen Arrays...
 
Zuletzt bearbeitet von einem Moderator:
PHP: 
<script type="text/javascript">

function init(x, y) {
var lat = x;
var lon = y;

alert ("X ist gleich " + lat + " und Y ist gleich " + lon);
}

</script>

<table>

<?php
// Variablen nur zum Testen mit Werten belegt
$row['bezirk'] = "bezirk";
$row['ort'] = "ort";
$row['x'] = "11";
$row['y'] = "22";

while($row = pg_fetch_assoc($ergebnis)) {
	printf	("<tr><td onclick='init(%s, %s);'>%s</td><td>%s</td></tr>",
            $row['x'], $row['y'], $row['bezirk'], $row['ort']);
}
?>

</table>

Die Reihenfolge der Parameter geändert und an der (hoffentlich) richtigen Stelle angegeben.
 
Zuletzt bearbeitet:
Vielen Dank tombe für die Hilfe! Dein Code funktioniert soweit ganz gut, ein kleines Problem habe ich aber leider noch: Und zwar ist die Funktion function init(); von OpenLayers "reserviert" und wird zur Erstellung der Karte und der Layer benötigt, d.h. wenn ich function init(x, y) verwende, dann springt er mir zwar auf der Karte zu den Koordinaten, aber die Restliche Kartenbedienung und bestimmte Darstellungen sind nicht mehr möglich.

Ist es irgendwie möglich, dass ich einfach eine andere Funktion deklariere und diese dann in meine bestehende function init() einbringe bzw. verschachtle?
 
Ich habe diese Funktion bzw. diesen Namen nur genommen weil du sie in deinem Code stehen hattest.

Wie du das mit dem Verschachteln meinst ist mir aber nicht so ganz klar!
 
function init() wird von OpenLayers zur Kartendarstellung benötigt, d.h. ich darf zur korrekten Darstellung der Karte und der Layer dieser Funktion keine Parameter (x, y) wie im obigen Code übergeben.
Deshalb müsste ich jetzt innerhalb der function init() irgendwie die mittels "onclick" geholten Koordinatenparameter mit einer anderen Funktion übermitteln. Hab unten mal deinen Code leicht verändert um zu verdeutlichen, was ich meine:

PHP: 
<script type="text/javascript"> 

function init() {          //OpenLayers Pflichtfunktion

//Hier weiss ich nicht, wie ich die neueFunktion einbringen kann?
function neueFunktion(x, y) { 


var lat = x; 
var lon = y; 

alert ("X ist gleich " + lat + " und Y ist gleich " + lon); 

} //function neueFunktion(x,y) ENDE

} //function init() ENDE

</script> 

<table> 

<?php 
// Variablen nur zum Testen mit Werten belegt 
$row['bezirk'] = "bezirk"; 
$row['ort'] = "ort"; 
$row['x'] = "11"; 
$row['y'] = "22"; 

while($row = pg_fetch_assoc($ergebnis)) { 
    printf    ("<tr><td onclick='neueFunktion(%s, %s);'>%s</td><td>%s</td></tr>",  
            $row['x'], $row['y'], $row['bezirk'], $row['ort']); 
} 
?> 

</table>
 
Muss die Funktion init den beim Klicken überhaupt aufgerufen werden? In diesem Fall könntest du es eventuell so lösen:

PHP: 
<script type="text/javascript">
function temp(x, y) {
var x_temp = x;
var y_temp = y;
// Funktion "init" aufrufen
init();
// Funktion "neueFunktion" mit Parameter aufrufen
neueFunktion(x_temp, y_temp);
}

function init() {
// hier passiert was auch immer
alert ("Hier ist die Funktion init!");
}

function neueFunktion(x, y) {
var lat = x;
var lon = y;
alert ("X ist gleich " + lat + " und Y ist gleich " + lon);
}
</script>

<table cellspacing="5" border="1">

<?php
// Variablen nur zum Testen mit Werten belegt
$row['bezirk'] = "bezirk1";
$row['ort'] = "ort1";
$row['x'] = "1";
$row['y'] = "2";

printf  ("<tr><td onclick='temp(%s, %s);'>%s</td><td>%s</td></tr>",
        $row['x'], $row['y'], $row['bezirk'], $row['ort']);

$row['bezirk'] = "bezirk2";
$row['ort'] = "ort2";
$row['x'] = "11";
$row['y'] = "22";

printf  ("<tr><td onclick='temp(%s, %s);'>%s</td><td>%s</td></tr>",
        $row['x'], $row['y'], $row['bezirk'], $row['ort']);
?>

</table>

Jetzt wird beim Klicken zuerst die Funktion "temp" aufgerufen.
Diese ruft dann ohne Parameter die Funktion "init" auf und anschließend mit den Parametern die Funktion "neueFunktion".

Wäre das eine Lösung?
 
Hab deinen Code gerade ausprobiert und auch verschiedene Varianten durchgespielt, funktioniert leider nicht.
Das Problem ist, dass ich die Koordinatenwerte (lat, lon) anscheinend unbedingt innerhalb der function init() benötige, da ich nur dort den OpenLayers spezifischen Befehl
map.setCenter(new OpenLayers.Lon.Lat(lat, lon) anbringen kann :(
 
Also gut, so schnell geben wir aber nicht auf.

In dieser Version gibt es vor der Tabelle 2 DIV-Container die dank CSS nicht sichtbar sind.

Beim Klicken auf die Tabelle werden an die Funktion "set_xy" die Werte von X und Y übergeben und in die DIV-Container geschrieben.

Dann wird aus dieser Funktion heraus die Funktion "init" aufgerufen. In dieser Funktion wird widerum der Inhalt der DIV-Container ausgelesen und somit stehen die Werte von X und Y innerhalb von "init" zur Verfügung.

HTML: 
<script type="text/javascript">
function set_xy (x, y) {
document.getElementById("x").innerHTML = x;
document.getElementById("y").innerHTML = y;
// Funktion init aufrufen
init();
}

function init() {
// hier passiert was auch immer
alert ("Hier ist die Funktion init!");

var x = document.getElementById("x").innerHTML;
var y = document.getElementById("y").innerHTML;
alert ("Und hier ist X " + x + " und Y " + y);
}

</script>
<div id="x" style="display: none;">
</div><div id="y" style="display: none;"></div>

<table cellspacing="5" border="1">
<?php
// Variablen nur zum Testen mit Werten belegt
$row['bezirk'] = "bezirk1";
$row['ort'] = "ort1";
$row['x'] = "1";
$row['y'] = "2";

printf  ("<tr><td onclick='set_xy(%s, %s);'>%s</td><td>%s</td></tr>\n",
        $row['x'], $row['y'], $row['bezirk'], $row['ort']);

$row['bezirk'] = "bezirk2";
$row['ort'] = "ort2";
$row['x'] = "11";
$row['y'] = "22";

printf  ("<tr><td onclick='set_xy(%s, %s);'>%s</td><td>%s</td></tr>\n",
        $row['x'], $row['y'], $row['bezirk'], $row['ort']);

?>

</table>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück