黑松山资源网 Design By www.paidiu.com
在最初自学 Web 开发的时候,那时没有所谓的 DIV/CSS 布局,一概 Table 布局的天下。当时有个问题就来了,如何补全宫格空白的单元格呢?——这是我在弄公司产品页头痛的问题。因为我不是学程序出身的,碰到这稍带算法的问题,就束手无策了,呵呵。顺带说说,记得分页的算法还折腾了我一下呢。
所谓宫格,就是说表格,3 行x 4 列 = 共12 单元格。如果只有 10 个产品,就只能填充表格 10 个单元格,其余的为空白。虽然空白,但也要渲染 <td></td> 元素,不然 table 会看起来会走样。写死当然可以,但问题 table 都是经过 ASP 动态渲染的。所以怎么计算,怎么该显示空白 td 就是个问题。我当时想了几个方法,回想起来很当然很不是合理,总之都是死马当活马医……能显示就行……呵呵。
后来到了 DIV/CSS 时代,Table 遭弃用。于是该算法也没关心了。——再后来一次项目中,发现 table 布局仍然适用的,于是就琢磨了一下这小问题。用 JS 动态控制的代码如下:
/**
* @class renderTable
* 输入一个数组 和 列数,生成一个表格 table 的 markup。
* @param {Array} list
* @param {Number} cols
* @param {Function} getValue
*/
define(function(require, exports, module) {
module.exports = function (list, cols, getValue){
this.list = list;
this.cols = cols || 5;
this.getValue = getValue || this.getValue;
}
module.exports.prototype = (new function(){
this.render = function(list){
list = list || this.list;
var len = list.length ;
var cols = this.cols;// 位数
var rows;
var remainder = len % cols;
var htmls = [];
rows = len / remainder;
if(remainder == 0){ // 可整除 无余数 直接处理
list.forEach(addTr.bind({
cols : cols,
htmls: htmls,
getValue : this.getValue
}));
}else{ // 处理余数部分
var remainnerArr = list.splice(list.length - remainder);
list.forEach(addTr.bind({
cols : cols,
htmls: htmls,
getValue : this.getValue
}));
// 填空位
var emptyArr = new Array(cols - remainnerArr.length);
emptyArr = emptyArr.join('empty');
emptyArr = emptyArr.split('empty');
// 余数部分 + 空位
remainnerArr = remainnerArr.concat(emptyArr);
if(remainnerArr.length != cols){
throw '最后一行长度错误!长度应该为' + cols;
}
remainnerArr.forEach(addTr.bind({
cols : cols,
htmls: htmls,
getValue : this.getValue
}));
}
return addTable(htmls.join(''));
}
/**
* 默认的获取显示值的函数。一般要覆盖该函数。
* @param {Mixed}
* @return {String}
*/
this.getValue = function(data){
return data;
}
/**
* 为每个值加个 <td></td>。若满一行加一个 </tr></tr>
* @param {Mixed} item
* @param {Number} i
* @param {Array} arr
*/
function addTr(item, i, arr){
var html = '<td>' + this.getValue(item) + '</td>';
if(i == 0){
html = '<tr>' + html;
}else if((i + 1) % this.cols == 0 && i != 0){
html += '</tr><tr>';
}else if(i == arr.length){
html += '</tr>';
}
this.htmls.push(html);
}
/**
*
* @param {String} html
*/
function addTable(html){
return '<table>' + html + '</table>';
// var table = document.createElement('table');
// table.innerHTML = html;
// table.border="1";
// document.body.appendChild(table);
}
});
});
大大们可能觉得这可是一闪而过就有思路的问题……但我那时毕竟是在转行……稍有点“技术含量”的问题都成了我的拦路虎……
2019-5-18 JSTL 的方式:
<%
// 空白单元格补全
String tds = ""; int maxTds = 9;
List<?> list = (List<?>)request.getAttribute("list");
for(int i = 0; i < (maxTds - list.size()); i++ ) {
tds += "<td></td>";
}
request.setAttribute("tds", tds);
%>
<table>
<tr>
<c:foreach items="${list}" var="item">
<td>
<h3>${item.name}----${totalCount}</h3>
<p></p>
<div></div>
</td>
<c:if test="${((currentIndex + 1) % 3) == 0}">
</tr>
<tr>
</c:if>
<c:if test="${((currentIndex + 1) == totalCount) && (totalCount != 9)}">
${tds}
</c:if>
</c:foreach>
</tr>
</table>
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2025年10月25日
2025年10月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]