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 空白单元格补全内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！