HTMLテーブルの空白セル補完方法

/**
 * @class renderTable
 * Input an array and columns to generate a markup for a table.
 * @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;// number of bits
   var rows;
   var remainder = len % cols;
   var htmls = [];
    rows = len / remainder;
    
   if(remainder == 0){ // divisible without remainder
    list.forEach(addTr.bind({
     cols : cols,
     htmls: htmls,
     getValue : this.getValue
    }));
   }else{ // handle the remainder part
    var remainnerArr = list.splice(list.length - remainder);
    
    list.forEach(addTr.bind({
     cols : cols,
     htmls: htmls,
     getValue : this.getValue
    }));
   
    // Fill in the empty space
    var emptyArr = new Array(cols - remainnerArr.length);
    emptyArr = emptyArr.join('empty');
    emptyArr = emptyArr.split('empty');
    // remainder + empty space
    remainnerArr = remainnerArr.concat(emptyArr);
    
    if(remainnerArr.length ! = cols){
     throw 'Last line length error! The length should be ' + cols;
    }
    remainnerArr.forEach(addTr.bind({
     cols : cols,
     htmls: htmls,
     getValue : this.getValue
    }));
   }
   
   
   return addTable(htmls.join(''));
  }
  
  /**
   * The default function to get the displayed value. Generally want to override this function.
   * @param {Mixed}
   * @return {String}
   */
  this.getValue = function(data){
   return data;
  }
   
  /**
   * Add a <td></td> for each value. If a line is full add a </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);
  }
 });
});

<%
 // Blank cell completion
 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>