HTML Table 空白单元格补全

在最初自学 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);
		}
	});
});

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

时间: 2024-12-18 16:23:18

HTML Table 空白单元格补全的相关文章

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

在最初自学 Web 开发的时候,那时没有所谓的 DIV/CSS 布局,一概 Table 布局的天下.当时有个问题就来了,如何补全宫格空白的单元格呢?--这是我在弄公司产品页头痛的问题.因为我不是学程序出身的,碰到这稍带算法的问题,就束手无策了,呵呵.顺带说说,记得分页的算法还折腾了我一下呢. 所谓宫格,就是说表格,3 行x 4 列 = 共12 单元格.如果只有 10 个产品,就只能填充表格 10 个单元格,其余的为空白.虽然空白,但也要渲染 <td></td> 元素,不然 tabl

WPS表格怎么批量删除空白单元格

  WPS表格是很多网友都在使用的表格软件,因此,小编就为大家分享一下与WPS表格有关的使用技巧.今天,小编就先给大家分享一下关于批量删除WPS表格空白单元格的步骤,想知道具体的操作步骤的网友,赶紧来看看今天的WPS表格使用教程吧!希望大家喜欢今天的教程哦! 批量删除WPS表格空白单元格的图文步骤: 1.打开数据表格后全选; 2.依次点击 开始------查找选择-------定位; 3.弹出定位窗口,选择"空值"后点"定位"; 4.左侧数据空白行会有颜色变化,右键

Excel中快速插入多个空白单元格的方法

Excel中快速插入多个空白单元格的方法           1.在工作表中选择单元格区域,然后在"开始"选项卡的"单元格"组中单击"插入"按钮上的下三角按钮,在打开的下拉列表中选择"插入单元格"选项,如图1所示. 图1 选择"插入单元格"选项 2.打开"插入"对话框,选择相应的单选按钮以选择活动单元格的移动方向,然后单击"确定"按钮关闭对话框,如图2所示.此时,当前

javascript-获得table某个单元格的内容,然后将select中等于该内容的项,变为选中项。

问题描述 获得table某个单元格的内容,然后将select中等于该内容的项,变为选中项. var tds=$('#infor tr:eq(1) td:nth-child(7)').html();$(""#seachContinent"").find(""option[text='""+tds+""']"").attr(""selected""tr

表单中table一个单元格里有两个数据,就是一个td有两个input=text。怎么确定数据相关。

问题描述 表单中table一个单元格里有两个数据,就是一个td有两个input=text.怎么确定数据相关. 表单中table一个单元格里有两个数据,就是一个td有两个input=text.怎么确定数据相关. 解决方案 确定数据相关是什么意思?你想实现什么 解决方案二: 你问问题能不能把问题说明白 解决方案三: 大概是这个意思吧? <!DocTYPE HTML><html> <head> <meta charset=""utf-8"&

Word 2007表格的空白单元格 如何批量写入字符

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   Microsoft Word在当前使用中是占有巨大优势的文字处理器,这使得Word专用的档案格式Word 文件(.doc)成为事实上最通用的标准.Word文件格式的详细资料并不对外公开.Word文件格式不只一种,因为随Word软件本身的更新,文件格式也会或多或少的改版,新版的格式不一定能被旧版的程序读取(大致上是因为旧版并未内建支援新版格式的能力).微软已经详细

用指定符号填充WPS表格大量空白单元格

在WPS表格编辑时,如需对有空格的表格进行批量指定填写,可以使用定位填写.条件格式以及公式等三种方法对空格做批量填写. 我们平时用 WPS表格编辑的表格总会有些单元格没有内容可填,而比较重要的表格一般都要求在所有没内容的空格中填上无.空或画一斜线,以防被人套印补填篡改.当然要想逐一填写表格中所有空格还是比较麻烦的,有没有什么方法可以快速填写所有空格呢? 在WPS Office 2010的WPS表格中至少有三种方法可以快速填写所有空格.我们就以一张人员奖罚记录的表格为例来介绍一下具体操作. 1.定

table合并单元格colspan和rowspan

起因 解决方案 colspan rowspan colspan rowspan 综合实例 起因     最近要实现一个成绩分析的功能,最终是要呈现到Word中的,一开始想到的使用报表显示,但是得有单独的数据库表来存储这些数据,如果说项目是刚开始做的话,倒也好说,不过现在项目已经进入了后期,在新建数据库表就有点不现实了,因此就jsp界面手画table了.但是在画table的过程中遇到一个问题,有些单元格是合并的,那么怎么来合并单元格呢? 解决方案 colspan & rowspan     col

合并table相同单元格的jquery插件分享(很精简)_jquery

效果如下 原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ