Question

我正在尝试将CSS样式应用于动态插入页面的页面元素，但我的方法无效。使用类似于我在下面插入的代码，我注意到当我检查chrome中的元素时，和标签围绕表格内容，但是和两者<和em>在表格行/表格数据内容之前 - 例如，检查元素视图看起来像......

<span> <table></table> <tr> <td></td> <td></td> </tr> <span>

知道为什么关闭表标签没有出现在表格行/数据标签之后？另外，为什么不应用背景颜色样式？

感谢您的任何建议。

简化的代码段：

<script> function insertComments(topic_id){ $.getJSON("getComments.py", {topic_id:topic_id, user_id:user_id}, function(data){ $('#tcomment_'+ topic_id).empty(); $('#tcomment_'+ topic_id).html('<table>'); for (i in data){ var commenter_profile_picture = data[i]["profile_picture"]; var commenter_name = data[i]["commenter_name"]; var commenter_person_id = data[i]["commenter_person_id"]; var comment = data[i]["comment"]; $('#tcomment_'+ topic_id).append('<tr><td><img src="'+commenter_profile_picture+'" height="20" width="20"></td><td> <a href="person.html?pID='+commenter_person_id+'">'+ commenter_name+'</a> - <span class="comment">'+comment+'</span></td></tr>'); } $('#tcomment_'+ topic_id).append('</table>'); }); } function insertCommentContainer(topic_id){ $("#comments").append('<span id="tcomment_'+topic_id+'" style="background-color:lightcyan;"></span>'); } var topic_id = 124 var user_id = 3 insertCommentContainer(topic_id); insertComments(topic_id); </script> <html> <body> <div id="comments"> </div> </body> </html>

Answer 1

$('#tcomment_'+ topic_id).html('<table>');

使用完整的<table>元素完全替换引用元素的HTML。它为您生成了结束</table>。然后

$('#tcomment_'+ topic_id).append('<tr><td><img src="...

在DOM树片段中已经在引用元素中的最后一个元素之后附加其参数。这就是你的表格行出现在表格之后的原因。

您应首先在变量中构建HTML，然后使用$(...).html( )一次性设置HTML。

Answer 2

嗯，真的不知道从哪里开始。不知道是什么导致了你的问题，因为代码是如此不可读但是：

1） user_id在定义

之前使用

{topic_id: topic_id, user_id: user_id // Not declared }

2）你应该关闭你的桌子，没有必要，但更好

$('#tcomment_'+ topic_id).html('<table>'); // Nop
$('#tcomment_'+ topic_id).html('<table><table/>');

需要定义

3） i：

for (i in data){} // Nop
for (var i in data){}

4）缺少;

// Nop
var topic_id = 124
var user_id = 3

// Yup
var topic_id = 124,
    user_id = 3; // This is being declared too late

5）如果您正确创建了html，则无需这样做：

$('#tcomment_' + topic_id).append('</table>');

6） <span>是一个inline元素，不能包含block等<table>元素。

7）您正在混合使用单引号和双引号。选择一个。

同样，我不知道什么是错的，但似乎有很多事情。

Answer 3

您的TR和TD不在表格内

<span>
 <table><!-- Table rows and data should come here --></table>
   <tr>
       <td></td>
       <td></td>
   </tr>
<span>

将样式应用于span和table不起作用

3 个答案: