如何制作下面给出的节目类型的列表视图？

Question

喜

你能告诉我如何在jquery mobile中制作这种类型的listview。我试过但我认为我的css不起作用。这是我的小提琴

http://jsfiddle.net/aYF4H/

var Seriennr = new Array();
Seriennr[0] = "38894458885";
Seriennr[1] = "38894458885";
Seriennr[2] = "38894458885";
Seriennr[3] = "38894458885";
Seriennr[4] = "38894458885";

var artkilcode = new Array();
artkilcode[0] = "7058";
artkilcode[1] = "7058";
artkilcode[2] = "7058";
artkilcode[3] = "7058";
artkilcode[4] = "7058";


var beschreibung = new Array();
beschreibung[0] = "Hewlett Packard";
beschreibung[1] = "Hewlett Packard";
beschreibung[2] = "Hewlett Packard";
beschreibung[3] = "Hewlett Packard";
beschreibung[4] = "Hewlett Packard";

var aktuelleArt = new Array();
aktuelleArt[0] = "often";
aktuelleArt[1] = "often";
aktuelleArt[2] = "often";
aktuelleArt[3] = "often";
aktuelleArt[4] = "often";

var wareneingang = new Array();
wareneingang[0] = "1706";
wareneingang[1] = "1706";
wareneingang[2] = "1706";
wareneingang[3] = "1706";
wareneingang[4] = "1706";


$(document).ready(function () {
    for(var i=0;i<Seriennr.length;i++){
        $('#serialNumber').append('<li class="serialNumberRowclick" id="'+i+'"><div style="float:left; Display:inline;width:20%">'+Seriennr[i]+'</div><div  style="float:left; Display:inline;width:20%>'+artkilcode[i]+'</div><div  style="float:left; Display:inline;width:20%>'+beschreibung[i]+'</div><div  style="float:left; Display:inline;width:20%>'+aktuelleArt[i]+'</div><div  style="float:left; Display:inline;width:20%>'+wareneingang[i]+'</div></li>');
    }

    // Refreshing the list
    $('#serialNumber').listview('refresh');
});

Answer 1

将您的数据添加到具有与您的图片匹配的CSS样式的表格中。像这样：

  

<强> DEMO

<table id="thetable" >
    <thead>
        <tr>
          <th >Seriennr</th>
          <th >Artkilcode</th>
          <th >Beschreibung</th>
          <th >Aktuelle Art</th>
          <th >Wareneingang</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Javascript来附加数组中的行：

$(document).on("pagecreate", "#page1", function(){
    var allrows = '';
    for(var i=0;i<Seriennr.length;i++){
        allrows += '<tr>';
        allrows += '<td>'+Seriennr[i]+'</td>';
        allrows += '<td>'+artkilcode[i]+'</td>';
        allrows += '<td>'+beschreibung[i]+'</td>';  
        allrows += '<td>'+aktuelleArt[i]+'</td>';                
        allrows += '<td>'+wareneingang[i]+'</td>';
        allrows += '</tr>';
    }    
    $("#thetable tbody").empty().append(allrows);
});

用于实现外观的CSS样式：

#thetable {
    width: 100%;
    border-collapse: collapse;
}
#thetable td, #thetable th {
    padding: 0.4em;
    text-shadow: none;
}
#thetable thead{
    background: #646464;
    color: white;
    text-shadow: none;
    font-weight: normal;
    font-size: 14px;
}
#thetable thead th:first-child{
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
#thetable thead th:last-child{
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}
#thetable tbody tr{
    font-weight: normal;
    font-size: 14px;
    background: #fff;  
    color: #333;
}
#thetable tbody tr:nth-child(even) td:first-child{
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
#thetable tbody tr:nth-child(even) td:last-child{
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}
#thetable tbody tr:nth-child(even){
    background: #d1d1d1;   
}