javascript - CSS样式javascript动态创建的表

Question

我需要设置由 javascript 动态创建的表格的样式。如果它只是一个静态 HTML 表格，我知道如何设置它的样式，但这是不同的，我对 javascript 不太熟悉。这是javascript代码:

[var aryPortalList = \[\];


function getPortalList() {
    var wP = window.location.protocol;
    var wH = window.location.host;
    var wPath = "ibi_apps/rs/ibfs/BIP/Portals?IBIRS_action=get";
    //http://webfocusclidev:8080/ibi_apps/rs/ibfs/BIP/Portals?IBIRS_action=get;
    var webfocusAPI = wP + "//" + wH + "/" + wPath;
    $.ajax({
        type: "GET",
        async: false,
        url: webfocusAPI,
        dataType: 'xml',
        success: function(xml) {
            $(xml).find('children').children().each(function() {
                var portal = {   Name: $(this).attr('bipName'),
                                 Link: "/ibi_apps/bip/portal" + $(this).attr('bipPath'),
                                 IconLink: "/ibi_apps/WFServlet.ibfs?IBFS1_action=RUNFEX&IBFS_path=" + $(this).attr('bipIconPath')
                              };  //var portal
                console.log("portal.name=" + portal.Name);
                if (portal.Name != "GlobalBI") aryPortalList.push(portal);
           }); //each
           console.log("Portals in List = " + aryPortalList.length);
        } //success function
    }); //ajax
}




function displayPortalList_Icon() {
    if (aryPortalList.length == 0) {
        var hTxt = "<p>You do not have access to any portals</p>";
        $("#portallist").append(hTxt);
    } else {
        var bRowAdded = false;
        var hTbl=$("<table id='tbl_portallist'></table>");
        var row = $('<tr></tr>').addClass('ingrPL_row');
        console.log("Portals in List = " + aryPortalList.length);
        for(var j=0; j < aryPortalList.length; j++) {
            var cell = $("<td align = 'center'></td>");


            var hTxt = $("<p>" + aryPortalList\[j\].Name + "</p>");
            var hLink = $("<a>").attr({"href": aryPortalList\[j\].Link,
                                   "target": "_blank"});
            var img = $("<img>").attr("src", aryPortalList\[j\].IconLink);
            img.width("100px");
            img.height("100px");
            console.log("hTxt=" + hTxt);
            hLink.append(img);
            cell.append(hTxt);
            cell.append(hLink);


            row.append(cell);
            bRowAdded = false;


            if ((j+1) % 4 == 0) {
                hTbl.append(row);
                bRowAdded = true;
                var row = $('<tr></tr>').addClass('ingrPL_row');
            }
        }
        if (!bRowAdded) {
            hTbl.append(row);
        }
        $("#portallist").html(hTbl);
    }
}


function displayPortalList_List() {
    if (aryPortalList.length == 0) {
        var hTxt = "<p>You do not have access to any portals</p>";
        $("#portallist").append(hTxt);
    } else {
        var bRowAdded = false;
        var hTbl=$("<table id='tbl_portallist'></table>");
        console.log("Portals in List = " + aryPortalList.length);
        for(var j=0; j < aryPortalList.length; j++) {
            var row = $('<tr></tr>').addClass('ingrPL_row');
            var cell = $("<td align = 'center'></td>");




            var hTxt = $("<p>" + aryPortalList\[j\].Name + "</p>");
            var hLink = $("<a>").attr({"href": aryPortalList\[j\].Link,
                                   "target": "_blank"});


            console.log("hTxt=" + hTxt);
            hLink.append(hTxt);
            cell.append(hLink);


            row.append(cell);
            hTbl.append(row);
        }


        $("#portallist").html(hTbl);
                console.log("portal.name=" + portal.Name);
    }
}][1] 

我附上了一张“门户”外观的照片。

我需要做的是将图标留出更多空间并将标题放在图标底部，看起来更像“iphone 应用程序”

非常感谢任何帮助。

Answer 1

您可以像设置静态元素一样设置它的样式查看您的代码，我可以看到表有一个 ID，行有类

var hTbl=$("<table id='tbl_portallist'></table>");
var row = $('<tr></tr>').addClass('ingrPL_row');

所以你可以在你的 CSS 文件中选择那些

CSS

#tbl_portallist {
    /*table style here */
}
#tbl_portallist th {
    /*table head style here*/
}
#tbl_portallist tr {
    /*table row style here*/
}
#tbl_portallist td {
    /*table data (cell) style here*/
}