jquery - 动态创建表 td 时未采用其 css

Question

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%;
   
}

表格出现了，但我想减少 hii 和图像之间的空间我试图将宽度减小到 5%，但我无法做到，我的图像 hii 是一个 td，ok 是一个 td。我希望他们两个都并肩而来

Answer 1

我可能认为你的问题是你使用百分比而不是固定宽度。我在自己的电脑上试了一下，这个样式被应用到了表格数据上。

你可以尝试扩展你的CSS：

.replyIcontd
{
   width: 200px;
   background: red;
}

这也可能对您有用，然后您只需要使用更合适的值 then 200px。需要注意的是，5% 的宽度是相对于表格的宽度而言的。

Answer 2

您忘记关闭/动态创建的元素。

 $('<tr />').append($('<td />').append($imageicon).addClass('replyIcontd'), $('<td />').text('hii'));

---

更新 我对您的脚本进行了一些相当大的更改，并采用了正确的方法。

 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()                     
              })

 });

演示