Question

我正在开发一个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>

现在我将正确地获得相关的能力。但我想在桌面上添加一些悬停效果。所以我在脚本上面添加了以下样式： -

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

但问题是风格没有任何影响..所以有人可以就此提出建议吗？作为一般规则，任何动态添加的内容都会获得当前的css设置吗？

修改好的，我添加了class="table"，现在我可以看到悬停效果，如下所示： -

但现在确定为什么我在<td> ??

之间得到白色

Answer 1

您至少遇到以下问题：

您的表格未使用.table类。您需要将以下属性class="table"添加到您正在创建<table style='boarder:3px solid;border-collapse:separate;border-spacing:1em;'>的元素中。或者，您只需更改样式即可使用table代替.table。

另一个小问题是表格样式中的boarder:3px solid拼写不正确，但这不是您要问的问题。

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

1 个答案: