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

Introduction to the steps of deploying redis in docker container

Table of contents 1 redis configuration file 2 Do...

Detailed tutorial on running selenium+chromedriver on the server

1. Introduction I want to use selenium to scrape ...

How to analyze MySQL query performance

Table of contents Slow query basics: optimizing d...

MySQL 8.0.18 installation and configuration graphic tutorial

Learning objectives: Learn to use Windows system ...

In-depth analysis of the diff algorithm in React

Understanding of diff algorithm in React diff alg...

js+canvas realizes code rain effect

This article shares the specific code of js+canva...

WeChat applet implements a simple dice game

This article shares the specific code of the WeCh...

How to install and connect Navicat in MySQL 8.0.20 and what to pay attention to

Things to note 1. First, you need to create a my....

Implementation of Docker private library

Installing and deploying a private Docker Registr...

Detailed explanation of nginx's default_server definition and matching rules

The default_server directive of nginx can define ...

Nginx uses ctx to realize data sharing and context modification functions

Environment: init_worker_by_lua, set_by_lua, rewr...

How to query a record in Mysql in which page of paging

Preface In practice, we may encounter such a prob...

JavaScript to implement search data display

This article shares the data display code for Jav...

React implements the addition, deletion, modification and query of todolist

Table of contents Take todolist as an example The...