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

我正在一个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设置？

编辑 OK我加入了class="table"，现在我可以看到悬停效果，如下图： -

，但现在知道为什么我得到了<td>之间的白色？

来源

2017-03-02 john G

您忘了在使用JavaScript添加到DOM中的html中添加'tbody'。 – itzmukeshy7

你必须至少存在如下问题：

你的表没有使用.table类。您需要将以下属性class="table"添加到您正在创建的此元素<table style='boarder:3px solid;border-collapse:separate;border-spacing:1em;'>。或者，您可以更改样式以使用table而不是.table。

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

来源

2017-03-02 13:38:48

你是正确的，但现在我无法渲染一个有争议的悬停,,你可以检查我的编辑pelase？ –

更改类=“表”，类=“表”，后html =“<表....” –

@VasHanea是我错了在这里键入..但这并没有nto修复悬停里面的空白.. –

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

回答

相关问题