JavaScript:一维数组动态生成N行N列table表格

表格数据展示算法
本文介绍了一种用于将大量数据以表格形式展示的算法实现。该算法通过计算每页显示的行数并合理分配数据,确保了良好的用户体验。适用于前端开发中数据展示的需求。
        var lines=Math.ceil(data.data.length/5);//显示行数
                for(var j=0;j<lines;j++){//遍历表格行
                    var props = "" ;
                    props +="<tr>";
                    for(var k=0;k<5;k++){//遍历表格列
                    props +="<td>";
                    var p = k+j*5;
                    if(typeof data.data[p]=="undefined"){
                            props+="&nbsp";
                        }else{
                            props+="<a href='#' onclick='clientswbl(\""+data.data[p].名称+"\",\""+data.data[p].url+"\")'>"+data.data[p].名称+"</a>";
                        }  
                    props +="</td>";    
                    };
                    props +="</tr>";
                    $('#swblbd').append(props);
                };
要实现二维数组的表格,可以使用el-table组件的嵌套表头功能,并根据二维数组的结构动态生成表格数据。 首先,需要定义二维数组的数据结构,例如: ```javascript data() { return { tableData: [ ['A', 'B', 'C'], ['D', 'E', 'F'], ['G', 'H', 'I'] ] } } ``` 然后,在模板中使用el-table组件,并使用v-for指令动态生成表头和表格数据: ```html <el-table :data="tableData"> <el-table-column v-for="(row, rowIndex) in tableData" :key="rowIndex" label="Row"> <template slot-scope="{ row }"> <el-table-column v-for="(cell, cellIndex) in row" :key="cellIndex" :label="'Column ' + (cellIndex + 1)"> {{ cell }} </el-table-column> </template> </el-table-column> </el-table> ``` 在这个例子中,我们使用v-for指令遍历二维数组的每一,并使用el-table-column动态生成每一的表头。然后,再在每一的slot-scope中使用v-for指令遍历该的每一个单元格,并使用el-table-column动态生成每一的表头和数据。 最终效果就是一个二维数组的表格,每一作为一个表头,每一作为一个表格,其中的数据来自于二维数组。 完整的代码示例: ```html <template> <el-table :data="tableData"> <el-table-column v-for="(row, rowIndex) in tableData" :key="rowIndex" label="Row"> <template slot-scope="{ row }"> <el-table-column v-for="(cell, cellIndex) in row" :key="cellIndex" :label="'Column ' + (cellIndex + 1)"> {{ cell }} </el-table-column> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ ['A', 'B', 'C'], ['D', 'E', 'F'], ['G', 'H', 'I'] ] } } } </script> ``` 这样就可以实现一个二维数组的表格,每一作为表头,每一作为表格,并显示相应的数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值