前几天在table的操作中，记录了动态生成表格的三种方式：

1、html语言的拼接；用字符串或者数组拼接在html语言中，这个理解起来最直观

2、插入行和列；insertRow()和insertCell()

3、生成元素；createElement()

在完毕当天记录的时候还自我检讨了下，考虑的解决方法不够全面，那么认真的忏悔了一通，结果之后却意外的发现了一件令我啼笑皆非的事情：原来动态生成表格，这是一个经典的面试问题，并且另一种更专业的解决方法。于是我之前的忏悔就成了笑话，事实上还是没全面了....

细致的研究了网上的解答，感觉比上面总结的三种方式专业了好多，技术的感觉一下子出来了，既然是一个经典的面试题。那就再认真的记录分析下吧：

1、先查看一下终于实现的结果，非常美丽(当然其有用上面的三种方式也能够的。这几次就这个生成的好看嘛，就多写点喽)

2、是不是很美丽。我认为挺美丽的。

来分析下须要实现的功能需求：

a、获取录入的期望行和列的值（这个如今毫无难度啊，表示无压力）；

b、依据获取到的行和列的值。动态生成对应行和列的表格（就是主要来分析它的实现的）。

c、点击某一单元格，获取单元格内部的值和对应单元格的背景颜色（这个在前面js获取table的一行一文中记录过）；

3、上一下实现的代码：

html部分：

 <body>

  <center>

	  经典的面试题<br/>

	  <hr/><br/>

	  输入行数：<input type="text" id="rowsNum"><br/>

	  输入列数：<input type="text" id="colsNum"><br/>

	  <a href="javascript:" id="go">获取表格</a>

	  <div id="tablePart"></div>

	  <div id="tipPart" style="background:cyan;"></div>

  </center>

 </body>

javascript部分：

<script type="text/javascript">

function CreateTable() {

	this.oTable  = null;

	this.bgColor = 0;

}

CreateTable.prototype.init=function(row, col) {//这是知识点1

		var oFrag = document.createDocumentFragment();//这是知识点2

		var oTemp = document.createElement("div");

		var oBody = document.body;

		var aRow  = [];

		var aCol  = [];

		for(var i = row; i--;) {

			aCol.length = 0;

			for(var j = col; j--;) {

				this.bgColor = this.getRanColor();

				aCol.push("<td style=\"background:"+ this.bgColor +";\">"+this.randomRange(1, 15)+"</td>");

			}

			aRow.push("<tr>"+ aCol.join("") +"</tr>")

		}

		oTemp.innerHTML = "";//这个赋值为空的必要性

		oTemp.innerHTML = "<table><tbody>"+ aRow.join("") +"</tbody></table>";

		while(oTemp.firstChild) oFrag.appendChild(oTemp.firstChild);

		this.oTable && oBody.removeChild(this.oTable);

		oBody.appendChild(oFrag);

		this.oTable = oBody.lastChild

	},

	CreateTable.prototype.randomRange=function(lower, upper) {

		return Math.floor(Math.random() * (upper - lower + 1) + lower)

	},

	CreateTable.prototype.getRanColor=function() {

		var str = this.randomRange(0, 0xF0F0F0).toString(16);

		while(str.length < 6) str = "0" + str;

		return "#" + (this.bgColor.toString().replace("#", "").toString(10) === str.toString(10) ?

str + 100000 : str)

	}

;

window.onload = function() {

	var table = new CreateTable();

	var row = document.getElementById("rowsNum");

	var col = document.getElementById("colsNum");

	var go = document.getElementById("go");

	var getted= document.getElementById("tablePart");

	var tip= document.getElementById("tipPart");

	go.onclick = function() {

		//隐藏信息区域

		getted.style.display = "none";

		//防止内存泄漏

		table.oTable && (table.oTable.onclick = null);

		//又一次渲染表格

		table.init(row.value, col.value);

		//事件代理

		table.oTable.onclick = function(event) {//这个尽管记录过。但这里还是标记下，非常经典

			event = event ||window.event;

			var anyOne = event.target || event.srcElement;

			if(anyOne.tagName.toUpperCase() === "TD") {

				tip.style.display = "block";

				tip.innerHTML = "";

				tip.innerHTML = "<span>本单元格内容为："+anyOne.innerHTML+"</br>背景颜色为："+anyOne.style.backgroundColor+"</span>";

			}

		}

	}

};

</script>

4、今日的重要所得

a、就从最简单最熟悉的開始说起：获取对象源

var anyOne=event.target||window.srcElement;

这些有些兼容的意味了，ie浏览器中没有target属性，可是有srcElement属性；而firefox则恰恰相反，它有target属性，却没有srcElement。而这样写的终于目的。则是在不论什么浏览器下都能得到对象源，即事件产生的源头(被点击的对象)

而obj.tagName则为获得对象源的标签，而obj.parentElement则是所取对象源的父层对象。在选中一行中。这个父层对象时关键的哦，而这里的tagName相同是关键。判定为列后，对该对象进行各种设置。

b、然后是效率提升的当前新知识：文档碎片

var oFrag = document.createDocumentFragment();

oBody.appendChild(oFrag);//终于要将文档增加body中

这是动态创建html的一种经典方法。有效的避免了多次调用，提高了工作效率，这里再来看几种经典方法：

* createAttribute(name);----用指定名称name创建特性节点

*createComment(text);-----创建带文本text的凝视节点

*createDoumentFragment();---创建文档碎片节点

*createElement("tagname");---创建标签名为tagname的节点

*createTextNode(text);-----------创建包括文本text的文本节点

这里已经成功应用过的仅仅有两个，临时仅仅做了解吧其他的，后期用到再说

c、protatype，这个是这个里面最出彩的地方，也是最重要的地方

首先上面的那段话还能够写成

CreateTable.prototype = {

	init: function(row, col) {

		var oFrag = document.createDocumentFragment();

		var oTemp = document.createElement("div");

		var oBody = document.body;

		var aRow  = [];

		var aCol  = [];

		for(var i = row; i--;) {

			aCol.length = 0;

			for(var j = col; j--;) {

				this.bgColor = this.getRanColor();

				aCol.push("<td style=\"background:"+ this.bgColor +";\">"+this.randomRange(1, 15)+"</td>");

			}

			aRow.push("<tr>"+ aCol.join("") +"</tr>")

		}

		oTemp.innerHTML = "";

		oTemp.innerHTML = "<table><tbody>"+ aRow.join("") +"</tbody></table>";

		while(oTemp.firstChild) oFrag.appendChild(oTemp.firstChild);

		this.oTable && oBody.removeChild(this.oTable);

		oBody.appendChild(oFrag);

		this.oTable = oBody.lastChild

	},

	randomRange: function(lower, upper) {

		return Math.floor(Math.random() * (upper - lower + 1) + lower)

	},

	getRanColor: function() {

		var str = this.randomRange(0, 0xF0F0F0).toString(16);

		while(str.length < 6) str = "0" + str;

		return "#" + (this.bgColor.toString().replace("#", "").toString(10) === str.toString(10) ? str + 100000 : str)

	}

};

另外说下我对prototype（原型）的一些理解，此应用中用到的是对象的prototype。而在createTable中生成的雷同于java中的私有属性，而它的prototype则能够看成共同拥有的属性。而prototype的部分就成为还有一部分的原型。这里有几点须要特别注意：

1、prototype并非对原型的继承。可是雷同于继承，它全然克隆了原型的属性和方法。可是不同于继承的是。原型方法相同能够作为当前这个的原型，而继承的话则不会有；

2、假设在原型和当前属性中都存在一个同样属性。则先在本身进行搜索设置，原型中就不再设置了

济南据说已经到了高温城市的前三甲了，悲哀啊。闷死了，prototype还得略微再看看啊。只是那是明天的事情了。先睡觉，困...

原来这是一个经典面试题-------Day61的更多相关文章

  1. 经典笔试题：用C写一个函数测试当前机器大小端模式

    “用C语言写一个函数测试当前机器的大小端模式”是一个经典的笔试题,如下使用两种方式进行解答: 1. 用union来测试机器的大小端 #include <stdio.h> union tes ...

  2. 李洪强iOS经典面试题156 - Runtime详解（面试必备）

    李洪强iOS经典面试题156 - Runtime详解(面试必备)   一.runtime简介 RunTime简称运行时.OC就是运行时机制,也就是在运行时候的一些机制,其中最主要的是消息机制. 对于C ...

  3. 李洪强iOS经典面试题155 - const,static,extern详解（面试必备）

    李洪强iOS经典面试题155 - const,static,extern详解(面试必备) 一.const与宏的区别(面试题): const简介:之前常用的字符串常量,一般是抽成宏,但是苹果不推荐我们抽 ...

  4. 李洪强iOS经典面试题154- 通知与推送

    李洪强iOS经典面试题154- 通知与推送   通知与推送 本地通知和远程推送通知对基本概念和用法? image 本地通知和远程推送通知都可以向不在前台运行的应用发送消息,这种消息既可能是即将发生的事 ...

  5. 李洪强iOS经典面试题153- 补充

    李洪强iOS经典面试题153- 补充   补充 有空就来解决几个问题,已经懒癌晚期没救了... UML 统一建模语言(UML,UnifiedModelingLanguage)是面向对象软件的标准化建模 ...

  6. 李洪强经典面试题152-Runtime

    李洪强经典面试题152-Runtime   Runtime Runtime是什么 Runtime 又叫运行时,是一套底层的 C 语言 API,其为 iOS 内部的核心之一,我们平时编写的 OC 代码, ...

  7. 李洪强iOS经典面试题147-WebView与JS交互

    李洪强iOS经典面试题147-WebView与JS交互   WebView与JS交互 iOS中调用HTML 1. 加载网页 NSURL *url = [[NSBundle mainBundle] UR ...

  8. 李洪强经典面试题145-Runloop

    李洪强经典面试题145-Runloop   Runloop 什么是 Runloop? 从字面上讲就是运行循环. 它内部就是do-while循环,在这个循环内部不断地处理各种任务. 一个线程对应一个Ru ...

  9. 李洪强iOS经典面试题144-数据存储

    李洪强iOS经典面试题144-数据存储   数据存储 sqlite中插入特殊字符的方法和接收到处理方法. 除'其他的都是在特殊字符前面加"/",而 ' -> '' .方法:k ...

随机推荐

  1. 洛谷——P1476 休息中的小呆

    P1476 休息中的小呆 题目描述 当大家在考场中接受考验(折磨?)的时候,小呆正在悠闲(欠扁)地玩一个叫“最初梦想”的游戏.游戏描述的是一个叫pass的有志少年在不同的时空穿越对抗传说中的大魔王ch ...

  2. Flask实战第61天：帖子板块过滤显示

    先在显示的帖子是所有版块的帖子,这节我们来完成点击某个版块,则显示此版块的帖子 要完成这个功能,我们需要在前端传递板块的id到后台, 编辑front_index.html 编辑首页视图 编辑板块选中样 ...

  3. python的reduce()函数(转)

    reduce()函数也是Python内置的一个高阶函数. reduce()函数接收的参数和 map()类似,一个函数 f,一个list,但行为和 map()不同,reduce()传入的函数 f 必须接 ...

  4. [BZOJ3000]Big Number(斯特林公式)

    求n!在k进制下的位数,n<=1e18 斯特林公式:$n!\approx \sqrt{2\pi n}(\frac{n}{e})^n$ 在n很大的时候有较好的精度保证. $\log_{k}n!+1 ...

  5. [BZOJ5251][九省联考2018]劈配(网络流)

    5251: [2018多省省队联测]劈配 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 33  Solved: 22[Submit][Status][ ...

  6. 【贪心】【multiset】Tinkoff Challenge - Final Round (Codeforces Round #414, rated, Div. 1 + Div. 2) C. Naming Company

    考虑两个人,先把各自的集合排个序,丢掉一半,因为比较劣的那一半一定用不到. 然后贪心地放,只有两种决策,要么把一个最优的放在开头,要么把一个最劣的放在结尾. 如果我的最优的比对方所有的都劣(或等于), ...

  7. [百度之星2014资格赛] Disk Schedule 报告

    Disk Schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  8. React事件系统入门

    React基于虚拟DOM实现了一个合成事件层,我们所定义的事件处理器会接受到一个合成事件层对象的实例,它完全符合W3C标准,不会存在任何IE标准的兼容性问题.并且和原生的浏览器事件一样拥有同样的接口, ...

  9. gitHub 基础命令

    设置开发人员信息 git config --global user.name "chen" git config --global user.email "xxxxx@q ...

  10. linux下的udev是干嘛的,能否说的通俗点

    转:http://www.360doc.com/content/11/0415/21/1317564_109924863.shtml 早期的linux的/dev目录下有一大堆设备文件,不管你的主机上是 ...