在最初自學(xué) Web 開(kāi)發(fā)的時(shí)候，那時(shí)沒(méi)有所謂的 DIV/CSS 布局，一概 Table 布局的天下。當(dāng)時(shí)有個(gè)問(wèn)題就來(lái)了，如何補(bǔ)全宮格空白的單元格呢？——這是我在弄公司產(chǎn)品頁(yè)頭痛的問(wèn)題。因?yàn)槲也皇菍W(xué)程序出身的，碰到這稍帶算法的問(wèn)題，就束手無(wú)策了，呵呵。順帶說(shuō)說(shuō)，記得分頁(yè)的算法還折騰了我一下呢。
所謂宮格，就是說(shuō)表格，3 行x 4 列 = 共12 單元格。如果只有 10 個(gè)產(chǎn)品，就只能填充表格 10 個(gè)單元格，其余的為空白。雖然空白，但也要渲染 <td></td> 元素，不然 table 會(huì)看起來(lái)會(huì)走樣。寫(xiě)死當(dāng)然可以，但問(wèn)題 table 都是經(jīng)過(guò) ASP 動(dòng)態(tài)渲染的。所以怎么計(jì)算，怎么該顯示空白 td 就是個(gè)問(wèn)題。我當(dāng)時(shí)想了幾個(gè)方法，回想起來(lái)很當(dāng)然很不是合理，總之都是死馬當(dāng)活馬醫(yī)……能顯示就行……呵呵。
后來(lái)到了 DIV/CSS 時(shí)代，Table 遭棄用。于是該算法也沒(méi)關(guān)心了。——再后來(lái)一次項(xiàng)目中，發(fā)現(xiàn) table 布局仍然適用的，于是就琢磨了一下這小問(wèn)題。用 JS 動(dòng)態(tài)控制的代碼如下：
/**
* @class renderTable
* 輸入一個(gè)數(shù)組 和 列數(shù)，生成一個(gè)表格 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;// 位數(shù)
var rows;
var remainder = len % cols;
var htmls = [];
rows = len / remainder;
if(remainder == 0){ // 可整除 無(wú)余數(shù) 直接處理
list.forEach(addTr.bind({
cols : cols,
htmls: htmls,
getValue : this.getValue
}));
}else{ // 處理余數(shù)部分
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');
// 余數(shù)部分 + 空位
remainnerArr = remainnerArr.concat(emptyArr);
if(remainnerArr.length != cols){
throw '最后一行長(zhǎng)度錯(cuò)誤！長(zhǎng)度應(yīng)該為' + cols;
}
remainnerArr.forEach(addTr.bind({
cols : cols,
htmls: htmls,
getValue : this.getValue
}));
}
return addTable(htmls.join(''));
}
/**
* 默認(rèn)的獲取顯示值的函數(shù)。一般要覆蓋該函數(shù)。
* @param {Mixed}
* @return {String}
*/
this.getValue = function(data){
return data;
}
/**
* 為每個(gè)值加個(gè) <td></td>。若滿(mǎn)一行加一個(gè) </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);
}
});
});
大大們可能覺(jué)得這可是一閃而過(guò)就有思路的問(wèn)題……但我那時(shí)畢竟是在轉(zhuǎn)行……稍有點(diǎn)“技術(shù)含量”的問(wèn)題都成了我的攔路虎……
2019-5-18 JSTL 的方式：
<%
// 空白單元格補(bǔ)全
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>
到此這篇關(guān)于HTML Table 空白單元格補(bǔ)全的實(shí)現(xiàn)方法的文章就介紹到這了,更多相關(guān)HTML Table 空白單元格補(bǔ)全內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
