HTMLTable空⽩单元格补全的简单实现
在最初⾃学 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) {
this.list = list;
}
list = list || this.list;
var len = list.length ;
var cols = ls;// 位数
var rows;
var remainder = len % cols;
var htmls = [];
rows = len / remainder;
if(remainder == 0){ // 可整除⽆余数直接处理
list.forEach(addTr.bind({
cols : cols,
htmls: htmls,
getValue : Value
}));
}else{ // 处理余数部分
var remainnerArr = list.splice(list.length - remainder);
list.forEach(addTr.bind({
cols : cols,
htmls: htmls,
getValue : Value
}));
// 填空位
var emptyArr = new Array(cols - remainnerArr.length);
emptyArr = emptyArr.join('empty');
emptyArr = emptyArr.split('empty');
// 余数部分 + 空位
remainnerArr = at(emptyArr);
if(remainnerArr.length != cols){
throw '最后⼀⾏长度错误！长度应该为' + cols;
}
remainnerArr.forEach(addTr.bind({
cols : cols,
htmls: htmls,
getValue : Value
}));
}
return addTable(htmls.join(''));
}
/**
* 默认的获取显⽰值的函数。⼀般要覆盖该函数。
* @param {Mixed}
* @return {String}
*/
return data;
html网页设计 table
}
/**
* 为每个值加个 <td></td>。若满⼀⾏加⼀个 </tr></tr>
* @param {Mixed} item
* @param {Number} i
* @param {Array} arr
*/
function addTr(item, i, arr){
var html = '<td>' + Value(item) + '</td>';
if(i == 0){
html = '<tr>' + html;
}else if((i + 1) % ls == 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 = ateElement('table');
//  table.innerHTML = html;
//  table.border="1";
//  document.body.appendChild(table);
}
});
});
⼤⼤们可能觉得这可是⼀闪⽽过就有思路的问题……但我那时毕竟是在转⾏……稍有点“技术含量”的问题都成了我的拦路虎……
以上就是⼩编为⼤家带来的HTML Table 空⽩单元格补全的简单实现全部内容了，希望⼤家多多⽀持~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。