Zeilen generieren

Mauri6687 · 17. Oktober 2018

Hallo liebe Community,

ich habe folgendes Problem -.-

Code

function getTable($payload, $rowName)
{
$echo =
'<table id="rowTable'.$rowName.'" class="table" >
<tr> ';
for($i = 0;$i<sizeof($payload);$i++)
{
$echo.= '<input id="row'.$rowName.'" type="text" class="form-control" name="rows[]" maxlength="10" placeholder="Färbungsname" style="width:130px;" value=\''.$payload[$i][0].'\'>';
}
$echo.='</tr></table>';
$echo.='<input type="button" class="btn btn-success btn-primary btn-xs" onclick="myCreateFunction()" value="  +  ">
<input type="button" class="btn btn-danger btn-xs " onclick="myDeleteFunction()" value="  -  ">
<script>
function myCreateFunction()
{
var inputTextValue;
var table = document.getElementById("rowTable'.$rowName.'");
var row = table.insertRow(-1);
var cell0 = row.insertCell(0);
cell0.innerHTML = \'<input id="row'.$rowName.'" type="text" class="form-control" name="rows[]" maxlength="10" placeholder="Färbungsname" style="width:130px;">\';
}
function myDeleteFunction()
{
document.getElementById("rowTable'.$rowName.'").deleteRow(-1);
}
</script>';
return $echo;
}

Alles anzeigen

Anhand des Codes merkt ihr, dass ich eine Tabelle habe mit X payloads.
Diese Payloads generieren Zeilen, jetzt möchte ich aber zusätzliche Y Zeilen hinzufügen.... Wenn ich auf den Plus - Button drücke, wird das JS nur im untersten Fragment(1) generiert und nicht

individuell in jedem Fragment so wie es sein sollte...

Zum Verständnis, ist der rowName größer als 1 werden dementsprechend Fragmente zusammen gebaut (von unten nach oben), also so ...

--------------------------------------------------------------

+Fragment 2

+

+ X Zeilen

+ Y Zeilen

+ Plus-Button

--------------------------------------------------------------

+Fragment 1

+

+ X Zeilen

+ Y Zeilen

+ Plus-Button

--------------------------------------------------------------

Ich hoffe ihr könnt mir helfen!!!

Ach ja, bin der totale N00B in JS bereich....

Mauri6687 · 18. Oktober 2018

Drücke ich mich etwas unklar aus oder wie kommt es das keiner eine Antwort gibt?

Sempervivum · 18. Oktober 2018

Also mir geht es so, dass ich das Ganze nicht verstehe. Diese Funktion getTable steht da ohne den Zusammenhang, wo sie aufgerufen wird und was das für Parameter sind. Keine Ahnung, was ein Payload ist. Und das ganze wäre einfacher zu lesen, wenn Du statt des PHP das generierte HTML und JS posten würdest, denn offenbar liegt das Problem ja auf Javascript-Seite.

Stef · 18. Oktober 2018

Hey,

Javascript soll nie mit PHP gemischt werden. Auch hast du ein paar Fehler drin, sodass es nicht funktioniert. Debuggen kannst du bei Javascript am besten mit der Webkonsole.

Hier ist ein Beispiel:

PHP

<?php
function createTable(array $payload, $rowName){
$output = "<table id='rowTable" . $rowName . "' class='table'>";
for($i = 0; $i < count($payload); $i++){
$output .= "<tr>
<td>
<input type='text' id='row" . $rowName ."' class='form-control' name='rows' maxlength='10' value='" . $payload[$i][0] . "'>
</td>
</tr>";
}
$output .= "</table>";
$output .= "<button class='btn btn-success btn-primary btn-xs' id='add'>+</button> <button class='btn btn-danger btn-xs' id='delete'>-</button>";
return $output;
}
$array = array("Test1", "Test2", "Test3", "Test4");
$table = null;
$rowName = 1;
$table = createTable($array, $rowName);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabelle erstellen</title>
<script>
window.onload = function(){
var table = document.getElementById("rowTable<?php echo $rowName; ?>");
var addRowButton = document.getElementById("add");
var deleteRowButton = document.getElementById("delete");
addRowButton.addEventListener("click", addRow);
deleteRowButton.addEventListener("click", deleteRow);
function addRow(){
var table = document.getElementById("rowTable<?php echo $rowName; ?>");
var newRow = table.insertRow(0);
var cell = newRow.insertCell(0);
cell.innerHTML = "<input type='text' class='form-control' name='rows' maxlength='10' value='Testzelle'>";
}
function deleteRow(){
var table = document.getElementById("rowTable<?php echo $rowName; ?>");
table.deleteRow(0);
}
}
</script>
</head>
<body>
<header>
<h1>Tabelle</h1>
</header>
<main>
<?php
echo $table;
?>
</main>
</body>
</html>

Alles anzeigen

Grüße,

Stef

Mauri6687 · 18. Oktober 2018

Super!!!

Vielen Dank ich hab das an meinen Code angepasst und nun macht es auch genau das was ich will

Ich würde aber gerne was hinterfragen, wieso sollte man JS nicht mit PHP in Verbindung bringen?

Gruß

Mauri

Stef · 18. Oktober 2018

Hey,

schön, dass es funktioniert.

Mauri6687 schrieb:

Ich würde aber gerne was hinterfragen, wieso sollte man JS nicht mit PHP in Verbindung bringen?

Ich habe nie gesagt, dass man Javascript nicht mit PHP in Verbindung bringen soll. Manchmal gibt es die Situatuion, dass die Id oder Klasse dynamisch erstellt wird und somit muss man dann via PHP dem Javascript diese dynamisch erstellte Id, bzw. Klasse geben wenn man auf diese Javascriptaktionen ausführen möchte.

Nur Javascript mittels PHP zu erstellen finde ich persönlich unnötig und überflüssig. Du kannst das meiner Meinung nach auch selbst sehen, indem du mein Code mit deinem vergleichst. Auch wenn man z.b. Debuggen muss, falls Fehler auftreten ist es wenn man Javascript und PHP bestmöglich trennt am einfachsten und schnellsten. Denn stell dir vor, du hast alles vermischt und musst jetzt aufgrund eines Fehlers debuggen und blickst da nicht mehr durch oder nur schwer.

Das sind Gründe genug meiner Meinung nach.

Grüße,

Stef

Tags