如何在phonegap javascript中显示如tableview的列表？

Question

HTML：

<ul id="listview" data-inset="true"></ul>

JavaScript的：

for(i=0;i<titles.length;i++){
    $('#listview').append('<li><a href="#">'+titles[i]+'</a>      </li>');
}

它会显示simle列表但我需要listview作为tableview吗？

Answer 1

PhoneGap不是将JS / HTML编译为Objective-C样式代码的包装器。我假设您想要达到的目标类似于下图：

您需要使用CSS设置#listview的样式以实现此目的。例如，您可以尝试这样的事情：

#listview {
    list-style: none;
    float: left;
    width: 100%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

    #listview li {
        width: 100%;
        padding: 10px;
        font-weight: bold;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        background-color: #fff;
        float: left;
        clear: both;
        border-bottom: 1px solid #ccc;
    }
        #listview li:last-of-type {
            border-bottom: none;
        }