Fatal编程技术网
  • jquery/
  • Jquery 将样式应用于跨度和表格不起作用

Jquery 将样式应用于跨度和表格不起作用

jquery html css ajax

Jquery 将样式应用于跨度和表格不起作用,jquery,html,css,ajax,Jquery,Html,Css,Ajax,我试图将CSS样式应用于动态插入页面的页面元素，但我的方法不起作用。使用类似于我在下面插入的代码，我注意到当我在chrome中检查元素时，和标记围绕着表内容，但和标记都位于表行/表数据内容之前-例如，检查元素视图看起来像 <span> <table></table> <tr> <td></td> <td></td> &l

我试图将CSS样式应用于动态插入页面的页面元素，但我的方法不起作用。使用类似于我在下面插入的代码，我注意到当我在chrome中检查元素时，和标记围绕着表内容，但和标记都位于表行/表数据内容之前-例如，检查元素视图看起来像

<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>&nbsp;<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>


函数插入命令（主题\u id）{
$.getJSON（“getComments.py”，{topic\u id:topic\u id，user\u id:user\u id}，函数（数据）{
$（'#tcommont'+主题id）.empty（）；
$（'#tcommont'+主题id）.html（''）；
对于（数据中的i）{
var commenter_profile_picture=数据[i][“profile_picture”]；
var commenter_name=数据[i][“commenter_name”]；
var commenter_person_id=数据[i][“commenter_person_id”]；
var comment=数据[i][“comment”]；
$（'#tcommont'+主题id）.append（'-'+注释+''）；
}
$（'#tcommont'+主题id）.append（''）；
});
}
函数insertCommentContainer（主题id）{
$（“#注释”）。附加（“”）；
}
变量主题id=124
var user_id=3
insertCommentContainer（主题id）；
插入内容（主题id）；
嗯，我真的不知道从哪里开始。不知道是什么导致了您的问题，因为代码太难阅读，但是：

1）
用户id
在定义之前已被使用

{topic_id: topic_id, user_id: user_id // Not declared }
2）您可能应该关闭您的桌子，这不是必需的，但更好

$('#tcomment_'+ topic_id).html('<table>'); // Nop
$('#tcomment_'+ topic_id).html('<table><table/>');
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>');



$（'#tcommont'+主题id）.append（''）；


6）
是一个
内联
元素，不能有
块
元素，如

7）你把单引号和双引号混在一起了。选择一个


同样，我不知道是什么问题，但似乎很多事情都是这样。
您的TR和TD不在表内


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





$（'#tcommont'+主题id）.html（''）；


将引用元素的HTML完全替换为完整的
元素。它为您生成了结账
。然后


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



$（'#tcommont'+主题id）。追加（'
将其参数追加到DOM树片段中已在引用元素中的最后一个元素之后。这就是为什么表行出现在表之后


您应该首先在变量中构建HTML，然后使用
$（…）.HTML（）
一次性设置HTML。
哇，真是一团糟……加上你的代码在jslint中出现了一大堆错误。你可能想看看
不是
的有效孩子。你应该使用
作为你的评论容器。@Brandan-谢谢！你的建议与Jim Garrison的建议相结合，解决了这个问题。谢谢！Com将您的建议与@Brandan的建议结合起来，使用a作为注释容器就达到了目的。有趣的是，$（…）.html（html_to_insert）在我将表格标记包含在“html_to_insert”变量中时不起作用-例如，如果变量值以开始和结束。要使其起作用，我必须使用：$（…）.html（''+html_to_insert+''）并删除“html_to_insert”中的表标记。

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



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