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

在最初自学 Web 开发的时候，那时没有所谓的 DIV/CSS 布局，一概 Table 布局的天下。当时有个问题就来了，如何补全宫格空白的单元格呢？——这是我在弄公司产品页头痛的问题。因为我不是学程序出身的，碰到这稍带算法的问题，就束手无策了，呵呵。顺带说说，记得分页的算法还折腾了我一下呢。
所谓宫格，就是说表格，3 行x 4 列 = 共12 单元格。如果只有 10 个产品，就只能填充表格 10 个单元格，其余的为空白。虽然空白，但也要渲染 <td></td> 元素，不然 table 会看起来会走样。写死当然可以，但问题 table 都是经过 ASP 动态渲染的。所以怎么计算，怎么该显示空白 td 就是个问题。我当时想了几个方法，回想起来很当然很不是合理，总之都是死马当活马医……能显示就行……呵呵。
后来到了 DIV/CSS 时代，Table 遭弃用。于是该算法也没关心了。——再后来一次项目中，发现 table 布局仍然适用的，于是就琢磨了一下这小问题。用 JS 动态控制的代码如下：

1. /**
2. * @class renderTable
3. * 输入一个数组 和 列数，生成一个表格 table 的 markup。
4. * @param {Array} list
5. * @param {Number} cols
6. * @param {Function} getValue
7. */
8. define(function(require, exports, module) {
9. module.exports = function (list, cols, getValue){
10.   this.list = list;
11.   this.cols = cols || 5;
13.   this.getValue = getValue || this.getValue;
14. }
16. module.exports.prototype = (new function(){
17.   this.render = function(list){
18.    list = list || this.list;
20.    var len = list.length ;
21.    var cols = this.cols;// 位数
22.    var rows;
23.    var remainder = len % cols;
24.    var htmls = [];
25.     rows = len / remainder;
27.    if(remainder == 0){ // 可整除 无余数 直接处理
28.     list.forEach(addTr.bind({
29.      cols : cols,
30.      htmls: htmls,
31.      getValue : this.getValue
32.     }));
33.    }else{ // 处理余数部分
34.     var remainnerArr = list.splice(list.length - remainder);
36.     list.forEach(addTr.bind({
37.      cols : cols,
38.      htmls: htmls,
39.      getValue : this.getValue
40.     }));
42.     // 填空位
43.     var emptyArr = new Array(cols - remainnerArr.length);
44.     emptyArr = emptyArr.join('empty');
45.     emptyArr = emptyArr.split('empty');
46.     // 余数部分 + 空位
47.     remainnerArr = remainnerArr.concat(emptyArr);
49.     if(remainnerArr.length != cols){
50.      throw '最后一行长度错误！长度应该为' + cols;
51.     }
52.     remainnerArr.forEach(addTr.bind({
53.      cols : cols,
54.      htmls: htmls,
55.      getValue : this.getValue
56.     }));
57.    }
59.    return addTable(htmls.join(''));
60.   }
62.   /**
63.    * 默认的获取显示值的函数。一般要覆盖该函数。
64.    * @param {Mixed}
65.    * @return {String}
66.    */
67.   this.getValue = function(data){
68.    return data;
69.   }
71.   /**
72.    * 为每个值加个 <td></td>。若满一行加一个 </tr></tr>
73.    * @param {Mixed} item
74.    * @param {Number} i
75.    * @param {Array} arr
76.    */
77.   function addTr(item, i, arr){
78.    var html = '<td>' + this.getValue(item) + '</td>';
80.    if(i == 0){
81.     html = '<tr>' + html;
82.    }else if((i + 1) % this.cols == 0 && i != 0){
83.     html += '</tr><tr>';
84.    }else if(i == arr.length){
85.     html += '</tr>';
86.    }
88.    this.htmls.push(html);
89.   }
91.   /**
92.    *
93.    * @param {String} html
94.    */
95.   function addTable(html){
96.    return '<table>' + html + '</table>';
97. //  var table = document.createElement('table');
98. //  table.innerHTML = html;
99. //  table.border="1";
100. //  document.body.appendChild(table);
101.   }
102. });
103. });

复制代码

大大们可能觉得这可是一闪而过就有思路的问题……但我那时毕竟是在转行……稍有点“技术含量”的问题都成了我的拦路虎……
2019-5-18 JSTL 的方式：

1. <%
2. // 空白单元格补全
3. String tds = ""; int maxTds = 9;
4. List<?> list = (List<?>)request.getAttribute("list");
5. for(int i = 0; i < (maxTds - list.size()); i++ ) {
6.   tds += "<td></td>";
7. }
9. request.setAttribute("tds", tds);
10. %>
11.   <table>
12.    <tr>
13.     <c:foreach items="${list}" var="item">
14.      <td>
15.       <h3>${item.name}----${totalCount}</h3>
16.       <p></p>
17.       <div></div>
18.      </td>
19.      <c:if test="${((currentIndex + 1) % 3) == 0}">
20.    </tr>
21.    <tr>
22.     </c:if>
23.     <c:if test="${((currentIndex + 1) == totalCount) && (totalCount != 9)}">
24.      ${tds}
25.     </c:if>
26.     </c:foreach>
27.    </tr>
28.   </table>

复制代码

到此这篇关于HTML Table 空白单元格补全的实现方法的文章就介绍到这了,更多相关HTML Table 空白单元格补全内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！