CSS设置javascript动态创建表的样式

我需要设计一个由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] 

[var aryportalist=\[\]；
函数getPortalList（）{
var wP=window.location.protocol；
var wH=window.location.host；
var wPath=“ibi_应用程序/rs/ibfs/BIP/Portals？IBIRS_操作=get”；
//http://webfocusclidev:8080/ibi_apps/rs/ibfs/BIP/Portals?IBIRS_action=get;
var webfocusAPI=wP+“/”+wH+“/”+wPath；
$.ajax({
键入：“获取”，
async:false，
网址：webfocusAPI，
数据类型：“xml”，
成功：函数（xml）{
$（xml）.find（'children'）.children（）.each（function（））{
var portal={Name:$（this.attr（'bipName'），
链接：“/ibi_apps/bip/portal”+$（this.attr（'bipPath'），
IconLink:“/ibi_apps/WFServlet.ibfs？IBFS1_action=RUNFEX&ibfs_path=“+$（this.attr（'bipIconPath'））
}；//var门户
console.log（“portal.name=“+portal.name”）；
if（portal.Name！=“GlobalBI”）aryportalist.push（portal）；
})；//每个
console.log（“列表中的门户=”+aryPortalList.length）；
}//成功函数
})；//ajax
}
函数显示PortalList_图标（）{
if（aryportalist.length==0）{
var hTxt=“您没有访问任何门户的权限”
”；
$（“#portallist”）.append（hTxt）；
}否则{
var=false；
var hTbl=$（“”）；
变量行=$（''）.addClass（'ingrPL_行'）；
console.log（“列表中的门户=”+aryPortalList.length）；
对于（var j=0；j”）；
var hLink=$（“”）.attr（{“href”：aryportalist\[j\].Link，
“目标”：“\u blank”}）；
var img=$（“'）.addClass（'ingrPL_行'）；
}
}
如果（！已添加）{
hTbl.append（行）；
}
$（“#portallist”）.html（hTbl）；
}
}
函数displayPortalList_List（）{
if（aryportalist.length==0）{
var hTxt=“您没有访问任何门户的权限”
”；
$（“#portallist”）.append（hTxt）；
}否则{
var=false；
var hTbl=$（“”）；
console.log（“列表中的门户=”+aryPortalList.length）；
对于（var j=0；j”）；
var hLink=$（“”）.attr（{“href”：aryportalist\[j\].Link，
“目标”：“\u blank”}）；
console.log（“hTxt=“+hTxt”）；
hLink.append（hTxt）；
cell.append（hLink）；
行。追加（单元格）；
hTbl.append（行）；
}
$（“#portallist”）.html（hTbl）；
console.log（“portal.name=“+portal.name”）；
}
}][1] 

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

我需要做的是在图标上留出更多的空间，并在图标底部添加标题，使其看起来更像一个“iphone应用程序”

---

非常感谢您提供的任何帮助。

您可以使用与设置静态元素样式相同的方式设置样式 查看您的代码，我可以看到表有一个ID，行有类

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

---

使用css类怎么样？您在这一行执行：

var row=$（''）.addClass（'ingrPL_row'））

hmm.。我该怎么做？对不起，这是一个新手。谢谢好心的先生。这正是我需要弄清楚的！干杯！现在快速提问，我该如何将门户标题移到图片下方？你有到页面的链接吗？如果没有。你能分享完成表格的html代码吗？我不是100%确定，但请尝试

cell.append（hLink）；cell.append（hTxt）；

而不是

cell.append（hTxt）；cell.append（hLink）；

，因此我们附加包含可单击图像的“hLink”元素，然后在其下方附加文本。试试看

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