Jak dynamicznie dodać do tabeli więcej wierszy, które zawierają javascript?

0

Witam, pracuję nad generatorem list zastępstw dla nauczycieli.

Tutaj jest mój dotychczasowy kod:

<?php
	session_start();
	if (!isset($_SESSION["login"])){
		header("Location: login.php");
		exit();
	}
	function dateV($format,$timestamp=null){
									$to_convert = array(
										'l'=>array('dat'=>'N','str'=>array('poniedziałek','wtorek','środa','czwartek','piątek','sobota','niedziela')),
										'F'=>array('dat'=>'n','str'=>array('styczeń','luty','marzec','kwiecień','maj','czerwiec','lipiec','sierpień','wrzesień','październik','listopad','grudzień')),
										'f'=>array('dat'=>'n','str'=>array('stycznia','lutego','marca','kwietnia','maja','czerwca','lipca','sierpnia','września','października','listopada','grudnia'))
									);
									if ($pieces = preg_split('#[:/.\-, ]#', $format)){	
										if ($timestamp === null) { $timestamp = time(); }
										foreach ($pieces as $datepart){
											if (array_key_exists($datepart,$to_convert)){
												$replace[] = $to_convert[$datepart]['str'][(date($to_convert[$datepart]['dat'],$timestamp)-1)];
											}else{
												$replace[] = date($datepart,$timestamp);
											}
										}
										$result = strtr($format,array_combine($pieces,$replace));
										return $result;
									}
								}
?>
<HTML>
	<HEAD>
		<TITLE>Tajne/poufne</TITLE>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var counter=1;
				$("#dodaj_zastepstwo").click(function () {
					counter++;
					mojaTabela = document.getElementById('mojaTabela');
					mojaTabela.innerHTML = mojaTabela.innerHTML+'<tr><td><select id="dzien'+counter+'" name="dzien'+counter+'"><?php
								if (date(N) >= 6) //jeżeli jest weekend:
								{
									echo '<option value="'.dateV('j f Y',strtotime('next Monday')).'">Poniedziałek ('.dateV('j f Y',strtotime("next monday")).')</option>';
									echo '<option value="'.dateV('j f Y',strtotime("next Tuesday")).'">Wtorek ('.dateV('j f Y',strtotime("next tuesday")).')</option>';
									echo '<option value="'.dateV('j f Y',strtotime("next Wednesday")).'">Środa ('.dateV('j f Y',strtotime("next wednesday")).')</option>';
								}
								else //jeżeli nie jest teraz weekend:
								{
									echo '<option value="'.dateV('n f Y',strtotime("now")).'">Dzisiaj ('.dateV('l',strtotime("now")).')</option>';
									if (date(N) == 5) //jeżeli mamy dzisiaj piątek:
									{
										echo '<option value="'.dateV('n f Y',strtotime("next Monday")).'">Poniedziałek ('.dateV('n f Y',strtotime("next Monday")).')</option>';
										echo '<option value="'.dateV('n f Y',strtotime("next Tuesday")).'">Wtorek ('.dateV('n f Y',strtotime("next Tuesday")).')</option>';
									}
									else //jeżeli nie mamy dzisiaj piątku:
									{
										echo '<option value="'.dateV('n f Y',strtotime("tomorrow")).'">Jutro ('.dateV('l',strtotime("tomorrow")).')</option>';
										if (date(N) == 4) //jeżeli mamy dzisiaj czwartek:
										{
											echo '<option value="'.dateV('n f Y',strtotime("next Tuesday")).'">Wtorek ('.dateV('n f Y',strtotime("next Tuesday")).')</option>';
										}
										else //jeżeli nie mamy dzisiaj czwartku:
										{
											echo '<option value="'.dateV('n f Y',strtotime("+2 days")).'">Pojutrze ('.dateV('l',strtotime("+2 days")).')</option>';
										}
									}
								}
					?><option value="inny" name="inny" id="inny">Inny...</option></select><script type="text/javascript">var selectmenu=document.getElementById("dzien'+counter+'");selectmenu.onchange=function(){ var chosenoption=this.options[this.selectedIndex]; if (chosenoption.value=="inny"){var test = window.prompt("Podaj datę (np. 9 stycznia 2015)","");document.getElementById("inny").value = test;document.getElementById("inny").text = test;}}<\/script>';
					mojaTabela.innerHTML = mojaTabela.innerHTML+'</td><td><select name="klasy"><optgroup label="Klasy I">';
					document.getElementById('ilosc_zastepstw').value = counter;
				});
			});
		</script>
	</HEAD>
	<BODY>
		<?php
		  echo "Witaj " . $_SESSION["login"];
		  echo "<br><a href='logout.php?" . SID . "'>";
		  echo "[Wyloguj]</a>";
		?>
		<form action="test.php" method="post">
			<BR><BR><B>Dodaj zastępstwo:</B><BR>
			<div id="formZastepstwa">
				<table id="mojaTabela">
					<tr>
						<td>Dzień</td><td>Klasa</td><td>Numer lekcji</td><td>Lekcja</td><td>Nauczyciel zastępujący</td><td>Sala</td>
					</tr>
					<tr>
						<td>
							<select id="dzien" name="dzien">
								<?php
								if (date(N) >= 6) //jeżeli jest weekend:
								{
									echo '<option value="'.dateV('j f Y',strtotime("next Monday")).'">Poniedziałek ('.dateV('j f Y',strtotime("next monday")).')</option>';
									echo '<option value="'.dateV('j f Y',strtotime("next Tuesday")).'">Wtorek ('.dateV('j f Y',strtotime("next tuesday")).')</option>';
									echo '<option value="'.dateV('j f Y',strtotime("next Wednesday")).'">Środa ('.dateV('j f Y',strtotime("next wednesday")).')</option>';
								}
								else //jeżeli nie jest teraz weekend:
								{
									echo '<option value="'.dateV('n f Y',strtotime("now")).'">Dzisiaj ('.dateV('l',strtotime("now")).')</option>';
									if (date(N) == 5) //jeżeli mamy dzisiaj piątek:
									{
										echo '<option value="'.dateV('n f Y',strtotime("next Monday")).'">Poniedziałek ('.dateV('n f Y',strtotime("next Monday")).')</option>';
										echo '<option value="'.dateV('n f Y',strtotime("next Tuesday")).'">Wtorek ('.dateV('n f Y',strtotime("next Tuesday")).')</option>';
									}
									else //jeżeli nie mamy dzisiaj piątku:
									{
										echo '<option value="'.dateV('n f Y',strtotime("tomorrow")).'">Jutro ('.dateV('l',strtotime("tomorrow")).')</option>';
										if (date(N) == 4) //jeżeli mamy dzisiaj czwartek:
										{
											echo '<option value="'.dateV('n f Y',strtotime("next Tuesday")).'">Wtorek ('.dateV('n f Y',strtotime("next Tuesday")).')</option>';
										}
										else //jeżeli nie mamy dzisiaj czwartku:
										{
											echo '<option value="'.dateV('n f Y',strtotime("+2 days")).'">Pojutrze ('.dateV('l',strtotime("+2 days")).')</option>';
										}
									}
								}

								?>
								<option value="inny" name="inny" id="inny">Inny...</option>
							</select>
							<script type="text/javascript">
							var selectmenu=document.getElementById("dzien")
							selectmenu.onchange=function(){ //run some code when "onchange" event fires
							 var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
							 if (chosenoption.value=="inny"){
							  var test = window.prompt("Podaj datę (np. 9 stycznia 2015)","");
							  document.getElementById('inny').value = test;
							  document.getElementById('inny').text = test;
							 }
							}
							</script>
						</td>
						<td>
							<select name="klasy">
								<optgroup label="Klasy I">
								<?php
									$plik = "klasy_pierwsze.txt";
									$dane = file($plik); /* pobieram dane z pliku i zapisuje do tablicy (linia = rekord) */

									for($i=0;$i<count($dane);$i++) { /* przeszukuję tablicę */
									  echo "<option>".$dane[$i]."</option>";
									}
								?>
								</optgroup>
								<optgroup label="Klasy II">
									<?php
										$plik = "klasy_drugie.txt";
										$dane = file($plik); /* pobieram dane z pliku i zapisuje do tablicy (linia = rekord) */

										for($i=0;$i<count($dane);$i++) { /* przeszukuję tablicę */
										  echo "<option>".$dane[$i]."</option>";
										}
									?>
								</optgroup>
								<optgroup label="Klasy III">
									<?php
										$plik = "klasy_trzecie.txt";
										$dane = file($plik); /* pobieram dane z pliku i zapisuje do tablicy (linia = rekord) */

										for($i=0;$i<count($dane);$i++) { /* przeszukuję tablicę */
										  echo "<option>".$dane[$i]."</option>";
										}
									?>
								</optgroup>
							</select>
						</td>
						<td>
							<select name="numer_lekcji">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
								<option>6</option>
								<option>7</option>
								<option>8</option>
							</select>
						</td>
						<td>
							<input type="text" id="lekcja" />
						</td>
						<td>
							<input type="text" id="nauczyciel" />
						</td>
						<td>
							<input type="text" id="sala" />
						</td>
					</tr>
				</table>
				<input type="hidden" id="ilosc_zastepstw" name="ilosc_zastepstw" value="1" />
			</div>
			<input type="submit" value="Wyślij" />
		</form>
		<br>
		<input type="button" id="dodaj_zastepstwo" value="Dodaj kolejne zastępstwo..." />
	</BODY>
</HTML>

Ten kod tworzy mi tabelę z sześcioma kolumnami i przyciskiem "Dodaj kolejne zastępstwo...".
Ponadto, gdy kliknę na wybór opcji pod napisem "Dzień", mogę wybrać jeden z wygenerowanych w PHP dni, a także kliknąć na opcję "Inny..." i podać inny dzień w okienku, które mi wtedy wyskoczy.

Problem pojawia się, gdy kliknę "Dodaj kolejne zastępstwo...".
Wtedy kolejna kolumna tworzy się poprawnie, jednak skrypt javascript obsługujący optionbox wyboru dnia wtedy nie działa (po wybraniu opcji "Inny..." nic się nie dzieje - okienko umożliwiające wpisanie dnia się nie pojawia. Podejrzewam, że javascript nie może być dodawany dynamicznie do kodu?).
Ponadto przy klikaniu "Dodaj kolejne zastępstwo..." wartości ustawione w poprzednich optionbox'ach są resetowane, co nie powinno mieć miejsca.

Proszę o pomoc w naprawieniu tego konkretnego problemu lub wskazaniu przykładu, jak można to zrobić inaczej, ponieważ zdaję sobie sprawę, że kombinuję tu trochę jak koń pod górkę.

Pozdrawiam,
Defozo

0

A słyszałeś o oddzieleniu Front-endu od Back-endu i jakiejś architekturze chociażby MVC? strasznie się to czyta, wszystko w jednym, nie sądzę, że z takim kodem, ktoś odpowie Ci na ten problem.

1 użytkowników online, w tym zalogowanych: 0, gości: 1