HTML Table 空白单元格补全的实现方法

在最初自学 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>

到此这篇关于HTML Table 空缺单位格补全的实现要领的文章就先容到这了,更多相干HTML Table 空缺单位格补全内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!