域名預訂/競價，好“米”不錯過

這篇文章主要介紹了HTML Table 空白單元格補全的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

在最初自學 Web 開發(fā)的時候，那時沒有所謂的 DIV/CSS 布局，一概 Table 布局的天下。當時有個問題就來了，如何補全宮格空白的單元格呢？——這是我在弄公司產(chǎn)品頁頭痛的問題。因為我不是學程序出身的，碰到這稍帶算法的問題，就束手無策了，呵呵。順帶說說，記得分頁的算法還折騰了我一下呢。

所謂宮格，就是說表格，3 行x 4 列 = 共12 單元格。如果只有 10 個產(chǎn)品，就只能填充表格 10 個單元格，其余的為空白。雖然空白，但也要渲染 元素，不然 table 會看起來會走樣。寫死當然可以，但問題 table 都是經(jīng)過 ASP 動態(tài)渲染的。所以怎么計算，怎么該顯示空白 td 就是個問題。我當時想了幾個方法，回想起來很當然很不是合理，總之都是死馬當活馬醫(yī)……能顯示就行……呵呵。

后來到了 DIV/CSS 時代，Table 遭棄用。于是該算法也沒關(guān)心了。——再后來一次項目中，發(fā)現(xiàn) table 布局仍然適用的，于是就琢磨了一下這小問題。用 JS 動態(tài)控制的代碼如下：

/**
 * @class renderTable
 * 輸入一個數(shù)組 和 列數(shù)，生成一個表格 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){ // 可整除 無余數(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 '最后一行長度錯誤！長度應該為' + cols;
    }
    remainnerArr.forEach(addTr.bind({
     cols : cols,
     htmls: htmls,
     getValue : this.getValue
    }));
   }
  
  
   return addTable(htmls.join(''));
  }
 
  /**
   * 默認的獲取顯示值的函數(shù)。一般要覆蓋該函數(shù)。
   * @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);
  }
 });
});

大大們可能覺得這可是一閃而過就有思路的問題……但我那時畢竟是在轉(zhuǎn)行……稍有點“技術(shù)含量”的問題都成了我的攔路虎……

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>

到此這篇關(guān)于HTML Table 空白單元格補全的實現(xiàn)方法的文章就介紹到這了,更多相關(guān)HTML Table 空白單元格補全內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

來源：腳本之家

鏈接：https://www.jb51.net/web/738282.html

申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！