How to implement HTML Table blank cell completion

How to implement HTML Table blank cell completion

When I first taught myself web development, there was no so-called DIV/CSS layout, and the world was dominated by Table layout. At that time, a question arose: how to fill in the blank cells in the grid? ——This is the headache I encountered when working on my company’s product page. Since I am not a programmer by background, I am at a loss when faced with problems that involve a little bit of algorithm, haha. By the way, I remember that the paging algorithm gave me a hard time.

The so-called grid refers to a table with 3 rows x 4 columns = a total of 12 cells. If there are only 10 products, only 10 cells of the table will be filled, and the rest will be blank. Although blank, the <td></td> elements must be rendered, otherwise the table will look distorted. Of course it is possible to hard code it, but the problem is that tables are dynamically rendered by ASP. So how to calculate and display blank TD is a problem. I thought of several methods at the time, which, looking back, were of course not very reasonable, but anyway, I just had to give it a try... as long as it could be displayed... haha.

Later, in the DIV/CSS era, Table was deprecated. So the algorithm doesn't care. ——In a later project, I found that the table layout was still applicable, so I thought about this little problem. The code for dynamic control using JS is as follows:

/**
 * @class renderTable
 * Input an array and the number of columns to generate a 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; // number of digits var rows;
   var remainder = len % cols;
   var htmls = [];
    rows = len / remainder;
    
   if(remainder == 0){ // Can be divided without remainder and processed directly list.forEach(addTr.bind({
     cols : cols,
     htmls: htmls,
     getValue : this.getValue
    }));
   }else{ // Process the remainder var remainnerArr = list.splice(list.length - remainder);
    
    list.forEach(addTr.bind({
     cols : cols,
     htmls: htmls,
     getValue : this.getValue
    }));
   
    // Fill in the blanks 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 'The last line length is wrong! Length should be ' + cols;
    }
    remainnerArr.forEach(addTr.bind({
     cols : cols,
     htmls: htmls,
     getValue : this.getValue
    }));
   }
   
   
   return addTable(htmls.join(''));
  }
  
  /**
   * The default function for getting the displayed value. This function should usually be overridden.
   * @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);
  }
 });
});

You may think that this is a problem that I can think of in a flash... But I was changing my career at that time... Any problem with a little "technical content" became a stumbling block for me...

2019-5-18 JSTL method:

<%
 //Complete blank cells 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>

This is the end of this article about how to complete HTML Table blank cells. For more information about how to complete HTML Table blank cells, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<:  Solution to the gap between divs

>>:  Sliding menu implemented with CSS3

Recommend

How to mount a disk in Linux and set it to automatically mount on boot

Knowing that everyone's time is precious, I w...

Example analysis of the principle and solution of MySQL sliding order problem

This article uses examples to explain the princip...

Use of Linux usermod command

1. Command Introduction The usermod (user modify)...

Detailed explanation of a method to rename procedure in MYSQL

Recently I have used the function of renaming sto...

HTML implements the function of detecting input completion

Use "onInput(event)" to detect whether ...

JavaScript to make the picture move with the mouse

This article shares the specific code of JavaScri...

CSS scroll-snap scroll event stop and element position detection implementation

1. Scroll Snap is a must-have skill for front-end...

vue+springboot realizes login verification code

This article example shares the specific code of ...

How to underline the a tag and change the color before and after clicking

Copy code The code is as follows: a:link { font-s...

Using CSS3 to achieve progress bar effect and dynamically add percentage

During the project, I started using the js reques...

Detailed explanation of the seven data types in JavaScript

Table of contents Preface: Detailed introduction:...

Solution to overflow:hidden failure in CSS

Cause of failure Today, when I was writing a caro...