HTML Table 空白单元格补全的简单实现
在最初自学Web开发的时候，那时没有所谓的DIV/CSS布局，一概Table布局的天下。当时有个问题就来了，如何补全宫格空白的单元格呢？——这是我在弄公司产品页头痛的问题。因为我不是学程序出身的，碰到这稍带算法的问题，就束手无策了，呵呵。顺带说说，记得分页的算法还折腾了我一下呢。
所谓宫格，就是说表格，3行x4列=共12单元格。如果只有10个产品，就只能填充表格10个单元格，其余的为空白。虽然空白，但也要渲染<td></td>元素，不然table会看起来会走样。写死当然可以，但问题table都是经过ASP动态渲染的。所以怎么计算，怎么该显示空白td就是个问题。我当时想了几个方法，回想起来很当然很不是合理，总之都是死马当活马医……能显示就行……呵呵。
后来到了DIV/CSS时代，Table遭弃用。于是该算法也没关心了。——再后来一次项目中，发现table布局仍然适用的，于是就琢磨了一下这小问题。用JS动态控制的代码如下：
/**
*@classrenderTable
*输入一个数组和列数，生成一个表格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=(newfunction(){
this.render=function(list){
list=list||this.list;
varlen=list.length;
varcols=this.cols;//位数
varrows;
varremainder=len%cols;
varhtmls=[];
rows=len/remainder;
if(remainder==0){//可整除无余数直接处理
list.forEach(addTr.bind({
cols:cols,
htmls:htmls,
getValue:this.getValue
}));
}else{ //处理余数部分
varremainnerArr=list.splice(list.length-remainder);
list.forEach(addTr.bind({
cols:cols,
htmls:htmls,
getValue:this.getValue
}));
//填空位
varemptyArr=newArray(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
}));
}
returnaddTable(htmls.join(''));
}
/**
*默认的获取显示值的函数。一般要覆盖该函数。
*@param{Mixed}
*@return{String}
*/
this.getValue=function(data){
returndata;
}
/**
*为每个值加个<td></td>。若满一行加一个</tr></tr>
*@param{Mixed}item
*@param{Number}i
*@param{Array}arr
*/
functionaddTr(item,i,arr){
varhtml='<td>'+this.getValue(item)+'</td>';
if(i==0){
html='<tr>'+html;
}elseif((i+1)%this.cols==0&&i!=0){
html+='</tr><tr>';
}elseif(i==arr.length){
html+='</tr>';
}
this.htmls.push(html);
}
/**
*
*@param{String}html
*/
functionaddTable(html){
return'<table>'+html+'</table>';
// vartable=document.createElement('table');
// table.innerHTML=html;
// table.border="1";
// document.body.appendChild(table);
}
});
});
大大们可能觉得这可是一闪而过就有思路的问题……但我那时毕竟是在转行……稍有点“技术含量”的问题都成了我的拦路虎……
以上就是小编为大家带来的HTMLTable空白单元格补全的简单实现全部内容了，希望大家多多支持毛票票~