HTML Table空白セル補完

3166 ワード

最初に独学でWeb開発をしたとき、いわゆるDIV/CSSレイアウトはなく、一概にTableレイアウトの天下でした.その時、質問が来ました.どうやって宮格の空白のセルを補うのでしょうか.--これは私が会社の製品ページをいじって頭が痛い問題です.私はプログラムの出身ではないので、この少しアルゴリズムの問題に出会って、手の施しようがありません、ほほほ.ちなみに、ページ分けのアルゴリズムが私を振り回したのを覚えています.
宮格とは,表,3行x 4列=計12セルである.製品が10個しかない場合は、表の10個のセルしか入力できません.残りは空白です.空白ですが、要素もレンダリングしないとtableが崩れてしまいます.書き込みはもちろんできますが、問題tableはすべてASPダイナミックレンダリングされています.だからどのように計算して、どのように空白tdを表示するかが問題です.私はその时いくつかの方法を考えて、思い出すのはとても当然でとても合理的ではありませんて、要するにすべて死んだ馬が生きている馬医になります......表示することができます......ほほほ.
その後DIV/CSS時代になるとTableは廃棄された.このアルゴリズムには関心がありませんでしたもう一度プロジェクトでtableレイアウトがまだ適用されていることに気づき、この小さな問題を考えました.JSで動的に制御するコードは以下の通りです.
/**
 * @class renderTable
 *            ,       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;//   
			var rows;
			var remainder = len % cols;
			var htmls = [];
				rows = len / remainder;
				
			if(remainder == 0){ //             
				list.forEach(addTr.bind({
					cols : cols,
					htmls: htmls,
					getValue : this.getValue
				}));
			}else{	//       
				var remainnerArr = list.splice(list.length - remainder);
				
				list.forEach(addTr.bind({
					cols : cols,
					htmls: htmls,
					getValue : this.getValue
				}));
			
				//    
				var emptyArr = new Array(cols - remainnerArr.length);
				emptyArr = emptyArr.join('empty');
				emptyArr = emptyArr.split('empty');
				//      +   
				remainnerArr = remainnerArr.concat(emptyArr);
				
				if(remainnerArr.length != cols){
					throw '        !     ' + cols;
				}
				remainnerArr.forEach(addTr.bind({
					cols : cols,
					htmls: htmls,
					getValue : this.getValue
				}));
			}
			
			
			return addTable(htmls.join(''));
		}
		
		/**
		 *            。        。
		 * @param {Mixed}
		 * @return {String}
		 */
		this.getValue = function(data){
			return data;
		}
	 	
		/**
		 *        <td></td>。        </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);
		}
	});
});

みんなはこれが一瞬で考えられる問題だと思っているかもしれませんが...私はその時結局転職していました......少し「技術の含有量」の問題が私の邪魔になりました......