April 28, 2012
table td is not taking its css when created dynamically
Question by prerna
var $imageicon = $('<image/>');
$imageicon.attr('src', '../../Content/images/ReplyIcon.png');
$imageicon.addClass('replyIcon');
var $table = $('<table/>').addClass('replyContent');
$table.attr('id', 'replyArea');
$table.append(
$('<tr>').append($('<td>').append($imageicon).addClass('replyIcontd'), $('<td>').text('hii'))
);
$("#container").append(
$('<div/>')
.attr('id', 'replytopost')
.append($table)
);
css
.replyIcontd
{
width:5%;
}
table is showing up but i waent to reduce space between hii and image I am trying to reduce the width to 5% but I am unable to do it
I the image hii is one td and ok is one td .I want both of them to come side by side
Answer by Starx
You forgot to give closing / on the elements you created dynamically.
$('<tr />').append($('<td />').append($imageicon).addClass('replyIcontd'), $('<td />').text('hii'));
Update
I made some pretty big changes on your script, with a proper way to do this.
var $imageicon = $('<img />', {
'src' : '../../Content/images/ReplyIcon.png',
'class' : 'replyIcon'
});
var $table = $('<table/>', {
"class" : "replyContent",
"id" : "replayArea",
'html' : $('<tr />', {
'html' : $('<td />', {
'class': 'replyIcontd',
'html' : $imageicon
}).html()+$("<td />", {
'text' : 'hii'
}).html()
})
});
