HTML Table 空白單元格補(bǔ)全的簡(jiǎn)單實(shí)現(xiàn)
在最初自學(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)題都成了我的攔路虎……
以上就是小編為大家?guī)?lái)的HTML Table 空白單元格補(bǔ)全的簡(jiǎn)單實(shí)現(xiàn)全部?jī)?nèi)容了,希望大家多多支持腳本之家~
相關(guān)文章
JavaScript性能優(yōu)化之函數(shù)節(jié)流(throttle)與函數(shù)去抖(debounce)
這篇文章主要介紹了JavaScript性能優(yōu)化之函數(shù)節(jié)流(throttle)與函數(shù)去抖(debounce)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08JS拖拽的進(jìn)一步練習(xí),移動(dòng)與拉伸實(shí)現(xiàn)代碼
這次增加了一些相關(guān)的功能,增加四個(gè)角的拉伸改變寬度,主要還是用到一些簡(jiǎn)單的坐標(biāo)位置計(jì)算,沒(méi)有什么技術(shù)難度,熟練了一下自己對(duì)拖拽的運(yùn)用2012-05-05js浮點(diǎn)數(shù)精確計(jì)算(加、減、乘、除)
本篇文章主要介紹了js浮點(diǎn)數(shù)精確計(jì)算(加、減、乘、除) 需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12cropper.js和exif.js實(shí)現(xiàn)頭像上傳縮放裁剪旋轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了cropper.js和exif.js實(shí)現(xiàn)頭像上傳縮放裁剪旋轉(zhuǎn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02詳解MVC如何使用開(kāi)源分頁(yè)插件(shenniu.pager.js)
本文主要分享了shenniu.pager.js整個(gè)插件內(nèi)容,不多且清晰。具有很好的參考價(jià)值,需要的朋友一起來(lái)看下吧2016-12-12javascript自動(dòng)生成包含數(shù)字與字符的隨機(jī)字符串
這篇文章主要介紹了javascript自動(dòng)生成包含數(shù)字與字符的隨機(jī)字符串,涉及Math.random()和Math.floor()兩個(gè)函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02easyUI實(shí)現(xiàn)(alert)提示框自動(dòng)關(guān)閉的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇easyUI實(shí)現(xiàn)(alert)提示框自動(dòng)關(guān)閉的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11