HTML Table 空白单元格补全的简单实现


Posted in Javascript onOctober 13, 2016

在最初自学 Web 开发的时候,那时没有所谓的 DIV/CSS 布局,一概 Table 布局的天下。当时有个问题就来了,如何补全宫格空白的单元格呢?——这是我在弄公司产品页头痛的问题。因为我不是学程序出身的,碰到这稍带算法的问题,就束手无策了,呵呵。顺带说说,记得分页的算法还折腾了我一下呢。

所谓宫格,就是说表格,3 行x 4 列 = 共12 单元格。如果只有 10 个产品,就只能填充表格 10 个单元格,其余的为空白。虽然空白,但也要渲染 <td></td> 元素,不然 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);
		}
	});
});

 大大们可能觉得这可是一闪而过就有思路的问题……但我那时毕竟是在转行……稍有点“技术含量”的问题都成了我的拦路虎……

以上就是小编为大家带来的HTML Table 空白单元格补全的简单实现全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JSQL 批量图片切换的实现代码
May 05 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
canvas实现图像布局填充功能
Feb 06 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 #Javascript
js给table赋值的实例代码
Oct 13 #Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 #Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 #Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 #Javascript
Node.js中常规的文件操作总结
Oct 13 #Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 #Javascript
You might like
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
jquery与prototype框架的详细对比
2013/11/21 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
python:print格式化输出到文件的实例
2018/05/14 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
考试违纪检讨书
2014/02/02 职场文书
承诺书怎么写
2014/03/26 职场文书
李开复演讲稿
2014/05/24 职场文书
我心目中的好老师活动方案
2014/08/19 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
工作年限证明范本
2015/06/15 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书