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

In-depth analysis of MySQL lock blocking

In daily maintenance, threads are often blocked, ...

Docker View the Mount Directory Operation of the Container

Only display Docker container mount directory inf...

How to install Chrome browser on CentOS 7

This article introduces how to install Chrome bro...

Detailed explanation of HTML table inline format

Inline format <colgroup>...</colgroup>...

Analysis of Context application scenarios in React

Context definition and purpose Context provides a...

Detailed explanation of several methods of installing software in Linux

1. RPM package installation steps: 1. Find the co...

The visual design path of the website should conform to user habits

Cooper talked about the user's visual path, w...

Detailed analysis of classic JavaScript recursion case questions

Table of contents What is recursion and how does ...

JS object copying (deep copy and shallow copy)

Table of contents 1. Shallow copy 1. Object.assig...

Example of utf8mb4 collation in MySQL

Common utf8mb4 sorting rules in MySQL are: utf8mb...

Implementing a web player with JavaScript

Today I will share with you how to write a player...

JavaScript Dom implements the principle and example of carousel

If we want to make a carousel, we must first unde...