pass a dynamically created table on submit - php

Question

I am building a simple application that will allow the users to add rows to a table and generate that table so the user can type in data into the rows and columns.
So far I have managed to create the rows dynamically jsfiddle
Now what I need to do is when the user hits generate (I am using PHP for this), the table must be shown in a html text area.
I did try the below code but didn't work
<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']);
}
?>
Any help on how i can fix this?

Answer 1

From yous jsfiddel, I've add <input> in your code.
$('#maintable tr:last').after('<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td></tr>');
Why didn't try to add <input>? Hope this help you

Answer 2

You can enable the contenteditable when generating your rows to make them editable instantly. You won't be needing to hit the generate button anymore but if you really want it to clicked first, then please feel free to edit this in any way you want. Here's an example:
HTML - It's still the same. I did nothing in here.
<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 - Put the additional code in every <td>. Put id too so you can get their values and save them into your database.
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>');
});
NOTE - If you want the generate table button to be clicked, you need to use jQuery ajax and a database (if you want to save the values you're going to create). I gave you some links that could help you. Hope I gave you a good start about your concern.
About contenteditable
About jQuery.ajax()
About serialize()
Tutorial on how to use contenteditable with PHP, MySQL, and jQuery
Ajax