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);
		}
	});
});

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

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

(0)

相关推荐

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

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

  • JS与jQuery遍历Table所有单元格内容的方法

    本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /

  • 使用jQuery 操作table 完成单元格合并的实例

    比较表格的内容.判断是否合并单元格: tr = $("#printPage tr").length;// 获取当前表格中tr的个数 var mark = 0; //要合并的单元格数 var index = 0; //起始行数 /* * 要合并单元格,需要存储两个参数, * 1,开始合并的单元格的第一行的行数, * 2.要合并的单元格的个数 **/ console.log(tr); //判断 若只有一行数据,则不做调整 if(tr <= 2){ }else{ //var i=1 比

  • 合并table相同单元格的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

  • 基于jquery的合并table相同单元格的插件(精简版)

    效果如下 原表格: 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

  • JS使用for循环遍历Table的所有单元格内容

    JS遍历Table的所有单元格内容思路是遍历Table的所有Row,遍历Row中的每一列,获取Table中单元格的内容 function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { //遍历Table的所有Row for (var j

  • Java使用EasyExcel进行单元格合并的问题详解

    目录 1.项目场景: 2.问题描述 3.原因分析: 5.总结 总结 1.项目场景: 简介:报销单导出要根据指定的excel模板去自动替换对应,然后重新生成一份新的excel.在给定的excel模板中,有部分字段进行了单元格合并,如下所示. 2.问题描述 由于一张报销单可能存在多条报销内容,可以看到,当超过模板中预先给定的一条时,则会自动换行,但换行时并不会自动依照模板中的样式进行单元格合并,如下所示. 3.原因分析: 首先可以直观的看到excel进行数据插入并自动换行的时候,换行的数据并没有按照

  • 将15位身份证补全为18位身份证的算法示例详解

    前言 最近在参与一个银行项目-某银行安防系统-反洗钱需求的开发,银行项目的离不开身份证号码,身份证号码作为我国公民的唯一标识,有这非同寻常的意义,由于业务的要求15位的身份证号码无法命中,所以需要补全为18位,一开始自己想着加个年份的前两位,后面再加个X不就行了嘛,后来代码写不下去了,上网查了资料,才知道自己想的是多么天真,还是比较复杂的,折腾了一下午终于有了眉目. 一.15位身份证和18位身份证号码结构介绍 要进行身份证号码的验证,首先需要了解我国身份证号码的编码规则.我国身份证号码多由若干位

  • css+table 1px边框单元格

    css table 之1px边框单元格--我们 .myTable,.myTable td { border:1px solid #cccccc; border-collapse:collapse; } 我们 我们 我们 我们 我们 我们 我们 我们 我们 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS拖动选择table里的单元格完整实例【基于jQuery】

    本文实例讲述了JS拖动选择table里的单元格.分享给大家供大家参考,具体如下: 用JS 实现类似Excel里面动态选择单元格的例子,从网上得到的例子,先记录在这里,以后参考用. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net JS拖动选择table里的单元格&

随机推荐