jQuery dynamic table with select - php

Question

I'm trying to create a dynamic table, in other words, a table where the number of columns per row
isn't necessarily the same as the other rows
can be changed live by the user
in every added column, there is contained a dropdown box which is filled using a database request.
I would like to be able to fill this dropdown once when the page loads, and not every time a column is added(it's for a calendar, so worst case: multiple times per row = 31*x).
I'm using jquery 1.9 and php 5.3 for my programming.
I've tried with JSON and $.post(), but this escapes too much of the needed slashes and quotes, and due to my version 5.3 of php, I can't use the "DO_NOT_ESCAPE_ANYTHING" constants provided in php 5.4+ (and yes, I know that that name isn't right, it's by heart)
So, heart of the question:
How do I use a combination of jquery and php to put a HTML -tag in a javascript variable to output on a jquery-handled button-click.
jsfiddle: http://jsfiddle.net/pjc3y/3/
code:
HTML:
<form name="myform" id="myForm" action="#test">
<div>
<table id="persCalTable">
<tr id="DAY_0">
<td>
<input type="text" name="name" size="25" value="Enter your name here!" />
</td>
<td>
<button id="eventAdder">add event</button>
</td>
</tr>
</table>
<input type="submit" value="Submit" id="submitter" />
</div>
</form>
javascript:
function addCellToRow(row, cell) {
row.append(cell);
}
function expandCalendarTable(myObj) {
var DATA = myObj.closest('tr').attr('id').slice(4); //data is the number after DAY_
var selector = '#persCalTable #DAY_' + DATA; //selector is the table and the clicked row id
var cellHiddenField = '<input type="hidden" name="status" value="New" />';
var cellOtherData = "INSERT SELECT TAG HERE";
var cell = cellHiddenField + cellOtherData;
addCellToRow($(selector), cell); // add the cell to the row defined by the selector
eve.preventDefault(); // stop the page refresh(if not in a form, this is not needed, when in a form, this is needed)
//alert('Picked: ' + DATA);
}
$(document).ready(function () {
$("#submitter").click(
function (e) {
e.preventDefault();
alert($('#myForm').serialize());
});
$("[id^=eventAdder]").click(
function (e) {
e.preventDefault();
expandCalendarTable($(this));
});
});

Answer 1

While you can have differing columns per row in an HTML table, if you have the following:
<table>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
What you will end up with is a table with 3 columns, and in the second row the third cell will be empty and borderless. What you can do is use a seperate table for each row, set the widths as equal and calculate and set cell widths manually with jQuery.
As for the calendar. I would suggest you use JQueryUi, which has a great calender control or a similar library than going for a select. Either way, you can prepare the object ahead of time and store it in a variable. You will then have to use clone on it otherwise it will move to the last place you inserted it at.
$(function(){
// Prepare the select (obviously yours would be more complicated)
var select = $("<select>");
<?php for( $i = 0; $i < count($optionValue); $i++ ) { ?>
select.append($("<option value='<?php echo $optionValue[$i]?>'><?php echo $optionText[$i]?></option>"));
<?php } ?>
// Insert into relevant parts
$("#insert1").append(select.clone());
$("#insert1 select").attr("name", "select1");
$("#insert2").append(select.clone());
$("#insert2 select").attr("name", "select2");
})