Question

我想知道如何使用这样的订单来实现一个表：

我在 JS ：

中试用了这段代码

var streetsPerPage = 5; 
var numNodes = parseInt(data.StreetList.length);
var noOfColumns=4;
var noOflist = numNodes / noOfColumns;
var rem = numNodes % noOfColumns;
var cellCount = 0;
var streetRowTemplate='<table width="100%"><tr><td>';
$.each(data.StreetList, function(index, streets){
    $('.streetListTemplate').removeClass('hide'); cellCount++;
    streetRowTemplate+='<div class="paddingTd" style="white-space: nowrap;"><a href="">'+streets.StreetName+'</a></div>';
    if(rem == 0) {
      if(cellCount >= noOflist) {
        streetRowTemplate+='</td>';
        streetRowTemplate+='<td>';
        cellCount = 0;
      }
    } else {
      if(cellCount == (noOflist + 1)) {
        streetRowTemplate+='</td>';
        cellCount = 0;
        streetRowTemplate+='<td>';
      }
    }
});
streetRowTemplate +='</td></tr></table>';
$('#streetListFilter').html(streetRowTemplate);

这是输出：

任何帮助将不胜感激。提前致谢！：）

Answer 1

我需要类似的东西，并且遇到了这个问题，所以答案是我确定对于原始海报来说为时已晚。我希望他们发布了有关使用的数据集的更多信息，但是从代码中我设法使用了类似的东西。 jsfiddle link

发布的代码的问题是

之后在noOflist中的提醒

var noOflist = numNodes / noOfColumns;

该示例中使用的数据与所需的列没有均匀的划分，并且会导致余数，当在稍后的行中处理时，余数会中断

if(cellCount == (noOflist + 1)) {

有效的解决方案是使用'Math.floor'获得'noOflist'的整数。完整的工作代码如下，

       var streetsPerPage = 5;
       var numNodes = parseInt(StreetList.length);
       var noOfColumns=3;
       var noOflist = numNodes / noOfColumns;
       noOflist = Math.floor(noOflist)
       var rem = numNodes % noOfColumns;
       var cellCount = 0;
       var streetRowTemplate='<table width="100%"><tr><td>';
       $.each(StreetList, function(index, streets){
         console.log(streets.StreetName);
           $('.streetListTemplate').removeClass('hide'); cellCount++;
           streetRowTemplate+='<div class="paddingTd" style="white-space: nowrap;"><a href="">'+streets.address1+'</a></div>';
           if(rem == 0) {
             if(cellCount >= noOflist) {
               streetRowTemplate+='</td>';
               streetRowTemplate+='<td>';
               cellCount = 0;
             }
           } else {
             if(cellCount == (noOflist + 1)) {
               streetRowTemplate+='</td>';
               cellCount = 0;
               streetRowTemplate+='<td>';
             }
           }
       });
       streetRowTemplate +='</td></tr></table>';
       $('#streetListFilter').html(streetRowTemplate);

这是我在github

中使用的数据集的示例

       var StreetList = [

            {
                "address1": "1745 T Street Southeast",
                "address2": "",
                "city": "Washington",
                "state": "DC",
                "postalCode": "20020",
                "coordinates": {
                    "lat": 38.867033,
                    "lng": -76.979235
                }
            },
            {
                "address1": "6007 Applegate Lane",
                "address2": "",
                "city": "Louisville",
                "state": "KY",
                "postalCode": "40219",
                "coordinates": {
                    "lat": 38.1343013,
                    "lng": -85.6498512
                }
            },


     ]

Javascript按字母顺序显示多个列的表数据

1 个答案: