在最开始通过自学 Web 开发设计的情况下 ,那时候沒有说白了的 DIV/CSS 合理布局 ,一概 Table 合理布局的天地。那时候有一个难题就来了,怎样补齐宫格空白的单元格呢?——它是我还在弄企业商品页头疼的难题 。由于不是我学程序流程出生的,遇到这略带优化算法的难题 ,就无计可施了,呵呵呵 。顺便说说,还记得分页查询的优化算法还瞎折腾了我一下呢。

说白了宫格 ,就是表格,3 行x 4 列 = 共12 单元格。假如仅有 10 个商品,就只有添充表格 10 个单元格 ,其他的为空白 。尽管空白,但还要3D渲染 <td></td> 原素,要不然 table 会看上去会走形。写死当然可以 ,但难题 table 全是历经 ASP 动态性3D渲染的。因此怎么计算,如何该显示信息空白 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 空白单元格补齐內容请搜索之前的文章内容或再次访问下边的类似文章,期待大伙儿之后多多的适用!