Example (works in firefox): http://progamonth.com/files/tablestestfile.html
I can't get select elements to dynamically get added to a table. This works in firefox, but it fails in IE and Opera. What's going on here?
DOM code:
<table id = "myTable">
<thead>
<tr><th>1</th><th>2</th><th>3</th>
</thead>
<tbody>
</tbody>
</table>
<select id = "select1" class = "hidden">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select id = "select2" class = "hidden">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
Javascript:
$(document).ready(function(){
$('#myTable tbody').append(generate());
});
function generate()
{
var $row = $('<tr>');
var selects = [$('#select1'),
null,
$('#select2')];
for( var i in selects )
{
var $td = $('<td></td>');
if( selects[i] != null )
{
var $select = selects[i].clone().show().removeAttr("id");
$select.find('option:first').before($('<option>'));
$select.val("");
$td.append($select);
}
$row.append($td);
}
return $row;
}