Javascript 为什么样式对动态添加的内容没有任何影响

我正在一个sharepoint页面上工作。其中我添加了一个嵌入代码，它将使用jQuery动态构建一个表：-

<script>
function getCurrentMainCategoryID(){

var results = "";
var html="";
html="<table class='table' style='border-collapse:separate;border-spacing:1em;'><th style='text-align:left'></th><th style='text-align:right'></th><th style='text-align:right'>Pages</th>";
    var url = "/_api/web/lists/getbytitle('MainCategory')/items?$select=Title";

    $.ajax({
     url: url,
     method: "GET",
     async: false,
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data) {
        if(data.d.results.length>0){


            results = data.d.results;
            for(var j2=0;j2<results.length;j2++)
            {


            var currentMainCatTitle = results[j2].Title;

    $.ajax({
     url: "/_api/web/lists/getbytitle('pages')/items??$select=Title,MainCategory&$filter=MainCategory eq " + "'" + currentMainCatTitle +"'" ,
     method: "GET",
     async: false,
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data) {
        if(data.d.results.length>0){
            html=html+"<tr><td>"
            + "<a href='/kb/BusinessContinuityPlan/Pages/Forms/AllItems.aspx?TreeField=MainCategory&TreeValue="
            + currentMainCatTitle +
            "#ServerFilter=FilterField1=MainCategory-FilterValue1="
            + currentMainCatTitle +
            "-TreeField=MainCategory-TreeValue="
            + currentMainCatTitle +
            "-OverrideScope=RecursiveAll-ProcessQStringToCAML=1'>"+ currentMainCatTitle+"</a></td>"
            + "<td>  </td><td style='text-align:right'>"+data.d.results.length+"</td></tr>";

        }

     },
     error: function (data) {   

     }
    });
            }


        }

     },
     error: function (data) {


     }
    });
    $("#inserthere").after(html+"</table>");

    return results;
    </script>

函数getCurrentMainCategoryID（）{
var结果=”；
var html=“”；
html=“页面”；
var url=“/_api/web/list/getbytitle（'maincography'）/items？$select=Title”；
$.ajax({
url:url，
方法：“获取”，
async:false，
标题：{“Accept”：“application/json；odata=verbose”}，
成功：功能（数据）{
如果（数据d结果长度>0）{
结果=数据d.结果；
对于（变量j2=0；j20）{
html=html+“”
+ ""
+“+data.d.results.length+”；
}
},
错误：函数（数据）{
}
});
}
}
},
错误：函数（数据）{
}
});
$（“#inserthere”）。在（html+”）之后；
返回结果；

现在我将正确地获得相关参数。但我想在桌面上添加一些悬停效果。因此，我在脚本上方添加了以下样式：-

<style>
.table tbody tr:hover td, .table tbody tr:hover th {
background-color:#eeeeea;
}
</style>

.表T车身tr:悬停td.表T车身tr:悬停th{
背景色：#EEEEE A；
}

但问题是这种风格没有任何效果。。那么，有人能就此提出建议吗？一般来说，任何动态添加的内容都会获得当前的css设置吗

编辑 好的，我添加了

class=“table”

，现在我可以看到悬停效果，如下所示：-

<style>
.table tbody tr:hover td, .table tbody tr:hover th {
background-color:#eeeeea;
}
</style>

---

但是现在确定为什么我在

之间使用白色了？

您至少有以下问题：

• 您的表未使用

  .table

  类。您需要向正在创建的元素添加以下属性

  class=“table”

  。或者，您可以将样式更改为使用

  table

  而不是

  .table

---

另一个小问题是，您的表样式中的

boarder:3px solid

拼写不正确，但这不是您要问的问题。

您忘记在使用JavaScript添加到DOM的html中添加

tbody

。您是正确的，但现在我无法呈现有争议的悬停，，你能检查一下我的编辑程序吗？@VasHanea是的，我在这里打错了。。但这并没有修复悬停中的空白..Modify:html=html+“”with html=html+“”和加载项样式：.cell:hover{background color:#eeeee a；}