# JS variable dynamisch generieren



## DrBonsai (10. August 2010)

Hallo,

ich versuche einen datepicker in einzelne Zellen einer html-Tabelle zu integrieren.
Das Problem ist, dass der picker pro Zelle einzeln initialisiert werden muss und die Anzahl der Zellen dynamisch ist. 
Deswegen brauche ich eine Möglichkeit, den Namen des pickers dynamisch anzupassen.

Allerdings bin ich js-noop und habe erstmal keine Ahnung, wie ich das hinkriege.

Hier mal mein Ansatz:

```
[...]	for ($row = 1; $row<= $rows_string; $row++)
		{
	echo "	
	<script type='text/javascript'>
	var row1 = ".$row."1;
	var row2 = ".$row."2;
	$(function() {
		$('#datepicker + row1 + 1').datepicker();
		$('#datepicker + row2 + 2').datepicker();
	});
	</script>
	";	
	echo "
	<tr>\n
		<td><input type = 'text' id = 'datepicker".$row."1' name = 'period".$row."1' /> - <input type = 'text' id = 'datepicker".$row."2' name = 'period".$row."2' /></td>\n ";
[...]
```

Hat da jemand eine Lösung parat? 
mfg,
David


----------



## rd4eva (10. August 2010)

Da scheints allgemein ein bischen zu hapern.
Deine php-Schleife macht nicht so richtig viel Sinn.

```
var row1 = ".$row."1;
var row2 = ".$row."2;
```

Wird zu 

```
var row1 = 11;
var row2 = 12;
```

Und der folgende jquery selector kann aus mehreren Gründen nicht funktionieren:

```
$('#datepicker + row1 + 1')
```
1. Es existiert kein Element mit der id datepicker
2. Das + im Selector ist der sog. "Next Adjacent Selector".
3. row1 und 1 müssten ein Tag-Name sein


----------



## DrBonsai (10. August 2010)

Hallo,
danke für deine Antwort!!


rd4eva hat gesagt.:


> ```
> var row1 = ".$row."1;
> var row2 = ".$row."2;
> ```
> ...



Das soll so auch sein. Damit will ich später die einzelnen Datepicker unterscheiden können. Ich habe zwei pro Zeile. Also möchte ich, dass am Ende  die "Datepicker11", "Datepicker12", "...21", "...22" etc definiert sind.



rd4eva hat gesagt.:


> Und der folgende jquery selector kann aus mehreren Gründen nicht funktionieren:
> 
> ```
> $('#datepicker + row1 + 1')
> ```



Da liegt mein Problem, denke ich.
Was ich halt brauche ist, dass dort die entsprechenden ids generiert werden. Allerdings habe ich noch nicht rausgefunden, wie das geht.



rd4eva hat gesagt.:


> 1. Es existiert kein Element mit der id datepicker


Doch, meine Schleife generiert in der Zeile mit den Tabellen-spalten die ids (id = 'datepicker".$row."1').



rd4eva hat gesagt.:


> 2. Das + im Selector ist der sog. "Next Adjacent Selector".
> 3. row1 und 1 müssten ein Tag-Name sein



Das verstehe ich nicht. Ich schätze also mal, dass diese Notierung in meinem Code sinnlos ist. Aber was müsste ich ändern?

Verstehst du, was mein Problem ist?


----------



## rd4eva (10. August 2010)

> Also möchte ich, dass am Ende die "Datepicker11", "Datepicker12", "...21", "...22" etc definiert sind.


Achso, verstehe. Dann nehm ich das zurück .



> Doch, meine Schleife generiert in der Zeile mit den Tabellen-spalten die ids (id = 'datepicker".$row."1').


Eben nicht. Das stimmt zwar das die Schleife Elemente mit den IDs generiert. Die IDs sind dann aber datepicker11 bzw. datepicker12. Dein jQuery Selector erwartet aber ein Element mit der ID datepicker. Um genau zu sein erwartet der Selektor ein Element mit der id datepicker unter dem sich ein Element mit dem tag-Name row1 befindet unter dem sich ein Element mit dem Tag-Name 1 befindet. Irgendwie unsinn oder?



> Das verstehe ich nicht. Ich schätze also mal, dass diese Notierung in meinem Code sinnlos ist. Aber was müsste ich ändern?


Der jQuery Selector müsste im endeffekt z.B. so aussehen:

```
$('#datepicker11')
```

Ich denke das reicht damit du es selbst hinbekommst


----------



## DrBonsai (10. August 2010)

rd4eva hat gesagt.:


> Achso, verstehe. Dann nehm ich das zurück .
> Ich denke das reicht damit du es selbst hinbekommst



Also ist es wie immer:
Warum einfach, wenn es auch kompliziert geht? ;-)

Die Lösung ist ganz einfach so:



```
for ($row = 1; $row<= $rows_string; $row++)
		{
	echo "	
	<script type='text/javascript'>
	$(function() {
		$('#datepicker".$row."1').datepicker();
		$('#datepicker".$row."2').datepicker();
	});
	</script>
	";	
	echo "
	<tr>\n
		<td><input type = 'text' id = 'datepicker".$row."1' name = 'period".$row."1' /> - <input type = 'text' id = 'datepicker".$row."2' name = 'period".$row."2' /></td>\n ";
```

Danke für den Wink mit dem Zaunpfahl! 

David


----------

