生成不规则表格

最新推荐文章于 2022-10-08 10:50:51 发布

羽下佳人

最新推荐文章于 2022-10-08 10:50:51 发布

阅读量666

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/zjl199303/article/details/69500311

版权

js 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

本地代码地址：

D:\zjl\zjl\html\array\arr3.html

例一：

原理：

①： addrshinum== 1 && addrxiannum== 1

生成每个省的第一个市区第一个县城，计算每个省下属县城的总个数，将省/市 spanrow 属性加上

②： addrshinum==1 && addrxiannum>1

生成第一个市区的所有县城，

③ : addrshinum> 1 && addrxiannum== 1

生成第一个第一个市区后的所有市区

④ : addrshinum>1 && addrxiannum>1

生成第一个第一个市区后的所有县城

表格样式：

数据:

js :

$( function(){
var person={
firstname : "Bill",
lastname : "Gates",
id : [ 1, 2, 3],
addr : {
北京: {
海淀 : [ '万寿路', '知春路', '翠微路', '凯德'],
西城区 : [ '复兴门', '北京站', '南礼士路'],
东城区 : [ '朝阳']
},
河北 : {
沧州 : [ '海兴', '黄骅', '盐山', '任丘']
},
河南 : {
郑州 : [ '商丘'],
兰州 : [ '拉面']
}
}
};
var row_counts = '';
createAllElement( person. addr, row_counts);
});

function createAllElement(addr,row_counts){
console. log(addr);
$( 'tbody'). empty();

for(var addrpro in addr){

// 省 addrpronum：第几个省

var addrshinum = 1;
var alladdrxiannum = 0;

for(var addrshi in addr[addrpro]){

// 市区 addrshinum：第几个省 --> 第几个市区

var addrxiannum = 1;

for(var addrxian in addr[addrpro][addrshi]){

// 县街 addrxiannum：第几个省 --> 第几个市区 --> 第几个县/街道

if( addrshinum== 1 && addrxiannum== 1 ){
var xianrownum = shinum( addr[ addrpro]);
var shirownum = addr[ addrpro][ addrshi]. length;
creatFirstTr( addrpro, addrshi,addr[ addrpro][ addrshi][ addrxian], xianrownum, shirownum);
}

else if(addrshinum==1 && addrxiannum>1){

// var shirownum = addr[addrpro][addrshi].length;

createLastTr(addr[ addrpro][ addrshi][ addrxian]);
}
else if( addrshinum> 1 && addrxiannum== 1) {
var xianrownum = addr[ addrpro][ addrshi]. length;
creatMiddleTr( addrshi,addr[ addrpro][ addrshi][ addrxian], xianrownum);
}

else if(addrshinum>1 && addrxiannum>1) {

createLastTr(addr[ addrpro][ addrshi][ addrxian]);
}
addrxiannum ++;
}
addrshinum ++;
}
}
}

function shinum(xian){
var xiannum = 0;
for ( var i in xian){
if(xian[ i]. length > 0){
xiannum += xian[ i]. length;
} else {
xiannum = 1;
}
}
return xiannum;
}

function creatFirstTr(pro,shi,xian,xianrownum,shirownum){
if(pro == '' || pro == undefined || pro == null){
pro = '--';
}
if(shi == '' || shi == undefined || shi == null){
shi = '--';
}
if(xian == '' || xian == undefined || xian == null){
xian = '--';
}
var html = ' <tr>'
+ '<td rowspan="'+ xianrownum + '">'+ pro + '</td>'
+ '<td rowspan="'+ shirownum + '">'+ shi + '</td>'
+ '<td>'+ xian + '</td>'
+ '</tr>';
$( 'tbody'). append( html);
}

function creatMiddleTr(shi,xian,xianrownum){
if(shi == '' || shi == undefined || shi == null){
shi = '--';
}
if(xian == '' || xian == undefined || xian == null){
xian = '--';
}
var html = ' <tr>'
+ '<td rowspan="'+ xianrownum + '">'+ shi + '</td>'
+ '<td>'+ xian + '</td>'
+ '</tr>';
$( 'tbody'). append( html);
}

function createLastTr(xian){
if(xian == '' || xian == undefined || xian == null){
xian = '--';
}
var html = ' <tr>'
+ '<td>'+ xian + '</td>'
+ '</tr>';
$( 'tbody'). append( html);
}

------------------------------------------------------------------------------------------------------------------------------------------------------------

例二：

例子网址： http://jmyd.gezlife.net/static/product_list

div 模拟 table ，php 后台数据

部分代码例子：


< div class= "j-product product_info" >
< foreach name= "inv_data" item= "v1" key= "cate1" >

< div class= "clearfix product_list j-product_list" >

< div class= "checkul fl" >
< volist name= "v1" id= "v2" >
< ul class= "pro_check j-pro_check" >
< for start= "0" end= "count($v2)" step= "1" name= "checkone" >
< li >< strong class= "col08" >< input type= "checkbox" class= "checkitem" ></ strong ></ li >
</ for >
</ ul >
</ volist >
</ div >

< span class= "pro_tit1" >{$cate1} </ span >

< div class= "product_con j-product_con fl" >
< volist name= "v1" id= "v2" >

< div class= "product_item j-product_item clearfix" >

< span class= "pro_tit2" >{$key} </ span >

< ul class= "j-proitem" >
< volist name= "v2" id= "v3" >

< li class= "clearfix" >
< div class= "col03" >
< a href= "{:C('SHOPNCURL')}shop/index.php?act=goods&op=index&goods_id={$v3['goods_id']}" class= "goods_info" >
< img src= "{$v3['goods_image']}" >
< span class= "goods_name" title= "{$v3['goods_name']}" >{$v3['goods_name']} </ span >
</ a >
</ div >
< div class= "col05" >{$v3['brandName_1']|default='--'}/{$v3['series_name']|default='--'} </ div >
< div class= "col05" >{$v3['goods_serial']|default='--'} </ div >
< div class= "col05 unit-price" >{$v3['goods_price']|default='--'} </ div >
< php >$discount = $v3['goods_price'] * $v3['designer_discount'] </ php >
< div class= "col05 discount-price" >
{$discount}
< input class= "j-discount-hidden" type= "hidden" value= " {$discount}" >
</ div >
< div class= "col05" >
< input type= "number" min= "1" name= "num[]" value= "{$v3['total']}" j-goods_id= "{$v3['goods_id']}" class= "number" datatype= "n" errormsg= "请输入整数！" >

<input class="j-numhidden" type="hidden" name="order[]" value="{$v3['goods_id']}|{$v3['total']}">

</ div >

< div class= "col07 total-price" ></ div >
</ li >
</ volist >
</ ul >
</ div >
</ volist >
</ div >
</ div >

</ foreach >
</ div >