eine dynamisch erstellte Tabelle beim Senden übergeben

Question

Ich erstelle eine einfache Anwendung, die den Benutzern erlauben wird, Zeilen zu einer Tabelle hinzuzufügen und diese Tabelle zu generieren, damit der Benutzer Daten in die Zeilen und Spalten eingeben kann.

Bisher habe ich es geschafft, die Reihen dynamisch jsfiddle

Jetzt zu schaffen, was ich tun muss, wenn der Benutzer trifft erzeugen (Ich bin mit PHP für diese), muss die Tabelle in einem HTML angezeigt Textbereich.

Ich habe den Code unten versuchen, aber nicht

<form action="1.php" method="post"> 
<?php 
echo $table = '<table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" > 
<tr><td colspan=3>sdsdsdsds</td></tr> 
<tr><td colspan=1>fsdfsf</td><td colspan=2>sdffsdfsf</td></tr> 
</table>';?> 

<textarea name="thetable" style="display:none"><?php echo $table ?></textarea> 

<input type="button" name="add" value="Add 1 Column" id="addrows1" style="color:#3300FF; font-size:16px; " /> 

<input type="submit" name="gen" value="Generate Table" style="color:#3300FF; font-size:16px; " /> 
</form> 

<?php 

if(isset($_POST['gen'])) 
{ 
var_dump($_POST['thetable']); 
} 

?> 

Jede Hilfe, wie ich dies beheben funktionierte?

Answer 1

Von yous jsfiddel, Ich habe <input> in Ihrem Code hinzufügen.

$('#maintable tr:last').after('<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td></tr>'); 

Warum nicht versuchen, <input> hinzuzufügen? Ich hoffe, dies hilft Ihnen

Answer 2

Sie können die contenteditable aktivieren, wenn Sie Ihre Zeilen erstellen, um sie sofort bearbeitbar zu machen. Sie müssen nicht mehr auf die Schaltfläche "Generieren" klicken, aber wenn Sie wirklich möchten, dass sie zuerst klickt, dann können Sie diese beliebig bearbeiten. Hier ein Beispiel:

HTML - Es ist immer noch das gleiche. Ich habe hier nichts gemacht.

<table id="maintable" width="50%" cellpadding="0" cellspacing="0" class="pdzn_tbl1" border="#729111 1px solid" > 
    <tr> 
     <th align="center"> Roll No </th> 
     <th align="center"> First Name </th> 
     <th align="center"> Last Name </th> 
    </tr> 
    <tbody> 
     <tr><td>1</td><td>John</td><td>Sample</td></tr> 
    </tbody> 
</table> 

<input type="button" name="add" value="+Add" id="addrows" style="color:#3300FF; font-size:16px; " /> 
<input type="button" name="add" value="Generate table to edit" id="" style="color:#3300FF; font-size:16px; " /> 

SCRIPT - Setzen Sie den zusätzlichen Code in jedem <td>. Setzen Sie id auch, damit Sie ihre Werte erhalten und sie in Ihrer Datenbank speichern können.

var counter = 1; 

$("#addrows").click(function(){ 
    $('#maintable tr:last').after('<tr><td id="col1'+counter+'" contenteditable="true">...</td><td id="col2'+counter+'" contenteditable="true">...</td><tdid="col3'+counter+'" contenteditable="true">...</td></tr>'); 
}); 

HINWEIS - Wenn Sie die Tabelle Schaltfläche angeklickt werden generieren möchten, müssen Sie jQuery Ajax und eine Datenbank verwenden (wenn Sie die Werte speichern möchten Sie gehen erstellen). Ich habe dir einige Links gegeben, die dir helfen könnten. Ich hoffe, ich habe dir einen guten Anfang in Bezug auf deine Bedenken gemacht.

About contenteditable

About jQuery.ajax()

About serialize()

Tutorial on how to use contenteditable with PHP, MySQL, and jQuery Ajax