CSS

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”应用程序＆＃39;

非常感谢任何帮助。

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*/
}

CSS来样式javascript动态创建表

1 个答案:

CSS