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 相关文章推荐
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
jQuery操作css样式
May 15 jQuery
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
vue搜索和vue模糊搜索代码实例
May 07 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
vue自定义组件实现双向绑定
Jan 13 Vue.js
微信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
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
微信小程序实现tab左右切换效果
2020/11/15 Javascript
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
vue数据初始化initState的实例详解
2019/04/11 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
python3 判断列表是一个空列表的方法
2018/05/04 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
要账委托书范本
2014/09/15 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
采购员岗位职责范本
2015/04/07 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
go语言map与string的相互转换的实现
2021/04/07 Golang
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
mybatis 获取更新记录的id
2022/05/20 Java/Android