Implementation Method of Table Blank Cell Completion in HTML

When I first learned Web development by myself, there was no so-called DIV/CSS layout, and the world of table layout was all around. At that time, there was a problem. How to fill the blank cells in the grid—— This is the problem that I am having a headache with the company's product page. Because I'm not a program student, I can't do anything about this problem with a little algorithm. By the way, I remember that the paging algorithm also bothered me.

The so-called grid is a table, 3 rows x 4 columns=12 cells in total. If there are only 10 products, only 10 cells of the table can be filled in, and the rest are blank. Although it is blank, you should also render<td></td>elements, otherwise the table will look out of shape. Of course, it is OK to write it dead, but the problem table is dynamically rendered by ASP. So how to calculate and how to display blank td is a problem. I thought of several methods at that time, but in retrospect, it was certainly not reasonable. In short, they were dead horses working as live horse doctors... just show it... hehe.

Later, in the era of DIV/CSS, Table was abandoned. So the algorithm is not concerned—— Another time in the project, I found that the table layout was still applicable, so I thought about this small problem. The code of JS dynamic control is as follows:

 /** * @class renderTable *Enter an array and number of columns to generate a markup for 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 digits 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 {//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 part+vacancy remainnerArr = remainnerArr.concat(emptyArr); if(remainnerArr.length !=  cols){ Throw 'The length of the last line is wrong! The length should be '+cols; } remainnerArr.forEach(addTr.bind({ cols : cols, htmls: htmls, getValue : this.getValue })); } return addTable(htmls.join('')); } /** *The default function to obtain the display value. This function is generally overwritten. * @param {Mixed} * @return {String} */ this.getValue = function(data){ return data; } /** *Add<td></td>to each value. If one 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 flash of thought... But I was changing my career after all

 <% //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>

So far, this article on the implementation method of HTML Table blank cell completion has introduced more about HTML Table blank cell completion.