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 相关文章推荐
javascript 写类方式之六
Jul 05 Javascript
JavaScript this 深入理解
Jul 30 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
JS前端笔试题分析
Dec 19 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
从vue源码看props的用法
Jan 09 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 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
克隆一个新项目的快捷方式
2013/04/10 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
详解js的六大数据类型
2016/12/27 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
javascript Function函数理解与实战
2017/12/01 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
应届护士求职信范文
2014/01/26 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
综治宣传月活动总结
2014/04/28 职场文书
大专毕业生求职信
2014/07/05 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
详解Python flask的前后端交互
2022/03/31 Python