gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 05:11:32 25 4
gpt4 key购买 nike

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

<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>

最佳答案

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

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

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

在 DOM 树片段的最后一个元素之后追加它的参数已经在被引用的元素中。这就是为什么您的表格行出现在表格之后的原因。

您应该先在变量中构建 HTML,然后使用 $(...).html( )一次设置所有 HTML。

关于jquery - 将样式应用于跨度和表格不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9236618/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com