如何用div+ul写出表格

  在项目中难免会遇到奇葩的需求，比如看似表格却是纵向列，确实让人头疼。所幸最后折腾出用div+ul实现，只是相比使用框架要写比较多的样式和调试。

  先上需求图：

 上js代码：（其中res是调接口返回的数据）

for(var i=0; i<res.length; i++){
    
    var roomState = res[i].roomState;

if(roomState == '整租'){

var showRoom = '<div class="col-md-3 roomColor'+i+'" style="padding: 0;"><div class="room wholeRentTitle'+ i +'"></div><div class="roomDetail wholeRentInfo'+ i +'"></div></div>';

$mainRoomContent.append(showRoom);

currentObj.$('.wholeRentTitle'+i).text(res[i].roomName);

var wholeRentInfo = currentObj.$('.wholeRentInfo'+i);

var col1 = '<ul class="col1 col-md-8" style="padding: 0; margin: 0;"><li><span>机房状态</span></li><li><span>客户名称</span></li><li><span>已加电数量/机架总数</span></li><li><span>定向预占机架数量</span></li><li><span>不可用机架数量</span></li><li><span></span></li></ul>';

wholeRentInfo.append(col1);

var col2 = '<ul class="col2 col-md-4 wholeRent'+ i +'" style="padding: 0; margin: 0;"></ul>';

wholeRentInfo.append(col2);

var $wholeRent = currentObj.$('.wholeRent'+i);

$wholeRent.append('<li><span>'+ res[i].roomState +'</span></li>');

$wholeRent.append('<li><span title="'+ res[i].custName +'">'+ res[i].custName +'</span></li>');

$wholeRent.append('<li><span>'+ res[i].jdNum + '/' + res[i].frameNum +'</span></li>');

$wholeRent.append('<li><span>'+ res[i].freeDirectionalNum +'</span></li>');

$wholeRent.append('<li><span>'+ res[i].unavailableNum +'</span></li>');

$wholeRent.append('<li><span></span></li>');

}

if(roomState == '中小客户租用'){

var showRoom = '<div class="col-md-3 roomColor'+i+'" style="padding: 0;"><div class="room smallCustTitle'+ i +'"></div><div class="roomDetail smallCustInfo'+ i +'"></div></div>';

$mainRoomContent.append(showRoom);

currentObj.$('.smallCustTitle'+i).text(res[i].roomName);

var smallCustInfo = currentObj.$('.smallCustInfo'+i);

var col1 = '<ul class="col1 col-md-8" style="padding: 0; margin: 0;"><li><span>机房状态</span></li><li><span>客户名称</span></li><li><span>已加电数量/机架总数</span></li><li><span>零散预占机架数量</span></li><li><span>空闲可售机架数量</span></li><li><span>不可用机架数量</span></li></ul>';

smallCustInfo.append(col1);

var col2 = '<ul class="col2 col-md-4 smallCust' + i +' " style="padding: 0; margin: 0;"></ul>';

smallCustInfo.append(col2);

var $smallCust = currentObj.$('.smallCust'+i);

$smallCust.append('<li><span>'+ res[i].roomState +'</span></li>');

$smallCust.append('<li><span title="'+ res[i].custName +'">'+ res[i].custName +'</span></li>');

$smallCust.append('<li><span>'+ res[i].jdNum + '/' + res[i].frameNum +'</span></li>');

$smallCust.append('<li><span>'+ res[i].campOnNum +'</span></li>');

$smallCust.append('<li><span>'+ res[i].freeNum +'</span></li>');

$smallCust.append('<li><span>'+ res[i].unavailableNum +'</span></li>');

}

if(roomState == '空闲'){

var showRoom = '<div class="col-md-3 roomColor'+i+'" style="padding: 0;"><div class="room freeTitle'+ i +'"></div><div class="roomDetail freeInfo'+ i +'"></div></div>';

$mainRoomContent.append(showRoom);

currentObj.$('.freeTitle'+i).text(res[i].roomName);

var freeInfo = currentObj.$('.freeInfo'+i);

var col1 = '<ul class="col1 col-md-8" style="padding: 0; margin: 0;"><li><span>机房状态</span></li><li><span>客户名称</span></li><li><span>已加电数量/机架总数</span></li><li><span>预占机架数量</span></li><li><span>空闲可售机架数量</span></li><li><span>不可用机架数量</span></li></ul>';

freeInfo.append(col1);

var col2 = '<ul class="col2 col-md-4 freeRoom'+ i +'" style="padding: 0; margin: 0;"></ul>';

freeInfo.append(col2);

var $freeRoom = currentObj.$('.freeRoom'+i);

//预占机架数量=零散+定向

var campOnNums = parseInt(res[i].campOnNum) + parseInt(res[i].freeDirectionalNum);

$freeRoom.append('<li><span>'+ res[i].roomState +'</span></li>');

$freeRoom.append('<li><span title="'+ res[i].custName +'">'+ res[i].custName +'</span></li>');

$freeRoom.append('<li><span>'+ res[i].jdNum + '/' + res[i].frameNum +'</span></li>');

$freeRoom.append('<li><span>'+ campOnNums +'</span></li>');

$freeRoom.append('<li><span>'+ res[i].freeNum +'</span></li>');

$freeRoom.append('<li><span>'+ res[i].unavailableNum +'</span></li>');

}

if(roomState == '库房'){

var showRoom = '<div class="col-md-3 storage" style="padding: 0; background-color: #c1c1c1;"><div class="storageTitle storageRoom'+ i +'"></div><div class="storageContent"></div></div>';

$mainRoomContent.append(showRoom);

currentObj.$('.storageRoom'+i).text(res[i].roomName);

currentObj.$('.storageContent').text(res[i].roomState);

var roomDetailHeight = currentObj.$('.roomDetail').height()-1;

currentObj.$('.storageContent').height(roomDetailHeight);

currentObj.$('.storageContent').css('line-height',roomDetailHeight + 'px');

}

}

 

css代码：

div,ul,li,span {

padding: 0;

margin: 0;

}



ul {

float: left;

list-style-type: none;

}



.col1 li {

width: 100%;

height: 100%;

text-align: center;

border-bottom: #666 1px solid;

border-right: #666 1px solid;

border-left: #666 1px solid;

}



.col2 li{

width: 100%;

height: 100%;

text-align: center;

overflow: hidden;

white-space:nowrap;

text-overflow: ellipsis;

border-bottom: #666 1px solid;

border-right: #666 1px solid;

}



span {

padding: 0 5px;

font-family: "微软雅黑";

font-size: 0.6rem;

}



.room {

border: #666 1px solid;

text-align: center;

}



.roomDetail {

overflow: hidden;

}

.storage {

border-bottom: #666 1px solid;

border-right: #666 1px solid;

border-left: #666 1px solid;

}



.storageTitle {

border-top: #666 1px solid;

border-bottom: #666 1px solid;

text-align: center;

}



.storageContent {

text-align: center;

vertical-align: middle;

}

  其中js用原生的代码实现，敲代码繁琐、可读性较差，项目是用ES5，如果是用ES6会好很多。如果小伙伴们有更好的方法，欢迎提出交流。当初在网上找不到纵向列表格实现的资料，希望借此第一次尝试写博客总结，也希望抛砖引玉能有更优化的解决方案。

  

以上。