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
In daily maintenance, threads are often blocked, ...
Which parameter does the rpm command use to insta...
Only display Docker container mount directory inf...
This article introduces how to install Chrome bro...
Inline format <colgroup>...</colgroup>...
Context definition and purpose Context provides a...
1. RPM package installation steps: 1. Find the co...
Cooper talked about the user's visual path, w...
Overview: I drew lessons from several timetable s...
Table of contents What is recursion and how does ...
Table of contents 1. Shallow copy 1. Object.assig...
This article uses examples to illustrate the prin...
Common utf8mb4 sorting rules in MySQL are: utf8mb...
Today I will share with you how to write a player...
If we want to make a carousel, we must first unde...