动态生成表格 - javascript

一、JSON数据源

JSON解释：

JSON是一种取代XML的数据结构,和xml相比,它更小巧但描述能力却不差,由于它的小巧所以网络传输数据将减少更多流量从而加快速度,

那么,JSON到底是什么?

JSON就是一串字符串 只不过元素会使用特定的符号标注。

{} 双括号表示对象

[] 中括号表示数组

"" 双引号内是属性或值

: 冒号表示后者是前者的值(这个值可以是字符串、数字、也可以是另一个数组或对象)

所以 {"name": "Michael"} 可以理解为是一个包含name为Michael的对象

而[{"name": "Michael"},{"name": "Jerry"}]就表示包含两个对象的数组

当然了,你也可以使用{"name":["Michael","Jerry"]}来简化上面一部,这是一个拥有一个name数组的对象

详细介绍请参见W3SCHOOL: http://www.w3school.com.cn/json/

JSON规范：http://www.ecma-international.org/ecma-262/5.1/

1.1 students

		var students = [
			{"cName": "class 1", "ID": "1001", "name": "李X", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1002", "name": "张X威", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1003", "name": "于X洋", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1004", "name": "张X扬", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1005", "name": "周X", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1006", "name": "王X", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1007", "name": "李X朋", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1008", "name": "邬X春", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 5", "ID": "1009", "name": "李X", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 5", "ID": "1010", "name": "孙X丽", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]}
		];

二、函数设计

所谓的动态就是使用删表和写表的操作。

2.1 删除表格

删除除了表头之外的数据。

CourseInf.deleteTable = function (table) {
	var mBody = table.getElementsByTagName('tbody'); 

	var len = table.rows.length;

	for (var i = 1; i < len; i++) {
		table.removeChild(mBody[1]);
	}
};

2.2 写表格

CourseInf.writeTable = function (obj, table) {
	var array = [];
	var className = obj.value;

	var iAcc = 0;
	var rowNum = 0;
	var str = "";

	for (var i = 0; i < CourseInf.gradeArrays.length; i++) {

		for (var key in CourseInf.gradeArrays[i]) {
			if (CourseInf.gradeArrays[i][key] == className){
				CourseInf.flag = true;
				rowNum++;
			}
			else {
				if (CourseInf.flag) {
					array[key] = CourseInf.gradeArrays[i][key];
				}
			}

		}
		CourseInf.flag = false;		

		if (rowNum != 0) {
			for (var j in array) {
				str = array[j];
				CourseInf.classArrays[iAcc] = str;

				iAcc++;
			}
			CourseInf.insertTable(4, 1, CourseInf.classArrays, table);

		}

		rowNum = 0;
	}

	CourseInf.iCount = 0;
};

如果数组中某个键值（cName）等于className则执行：标志为真；并且行数+1操作。

否则，判断标志是否为真？为真读取数据。

			if (CourseInf.gradeArrays[i][key] == className){
				CourseInf.flag = true;
				rowNum++;
			}
			else {
				if (CourseInf.flag) {
					array[key] = CourseInf.gradeArrays[i][key];
				}
			}

行数不等于0时，插入表格数据

CourseInf.insertTable = function (colNum, rowNum, array, table) {
	var mBody = document.createElement("tbody");

	for (var i = 0; i < rowNum; i++) {
		var mTr = document.createElement("tr");

		var j = 0;
		for (j = 0; j < colNum; j++) {
			var mCell = document.createElement("td");
			var mText = document.createTextNode(array[j + CourseInf.iCount]);

			mCell.appendChild(mText);
			mTr.appendChild(mCell);
		}
		CourseInf.iCount += j;
		mBody.appendChild(mTr);
	}
	table.appendChild(mBody);
};

2.3 删除重复项

我们在读取班级列表的时候，希望一个班级只能出现一次。

所以，我们要处理多个“class 1”和“class 5”的问题。

	for (var i = 0; i < array.length; i++) {
		obj[array[i]] = true;
	}

obj[array[i]] = true;

也许这么看就容易懂了obj[key] = true;

附：

dynamicTable.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	<title>动态创建表格</title>
	<script type="text/javascript">
		var students = [
			{"cName": "class 1", "ID": "1001", "name": "李X", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1002", "name": "张X威", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1003", "name": "于X洋", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1004", "name": "张X扬", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1005", "name": "周X", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1006", "name": "王X", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1007", "name": "李X朋", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 1", "ID": "1008", "name": "邬X春", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 5", "ID": "1009", "name": "李X", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]},
			{"cName": "class 5", "ID": "1010", "name": "孙X丽", "course": ["英语", "高数"], "elective": ["政治经济学", "哲学"]}
		];
	</script>

	<script type="text/javascript" src="dynamicTable.js" ></script>

	</head>

	<body onLoad="CourseInf.loadData(students)">
		<select id="className" onChange="CourseInf.readClasses(this)">
		</select>
		<br>     
		<table id="tb1" border="1">
		  <tr>
		    <th>学号</th>
		    <th>姓名</th>
		    <th>必修课</th>
		    <th>选修课</th>
		  </tr>
		</table>

	</body>
</html>

dynamicTable.js

/*
 * 课程信息
 * @author xiaobin
 */

var CourseInf = {
	gradeArrays :   [],
	classArrays :	[],

	iCount 		:	0,
	flag 		: 	false,
};	

CourseInf.deleteTable = function (table) {
	var mBody = table.getElementsByTagName('tbody'); 

	var len = table.rows.length;

	for (var i = 1; i < len; i++) {
		table.removeChild(mBody[1]);
	}
};

CourseInf.insertTable = function (colNum, rowNum, array, table) {
	var mBody = document.createElement("tbody");

	for (var i = 0; i < rowNum; i++) {
		var mTr = document.createElement("tr");

		var j = 0;
		for (j = 0; j < colNum; j++) {
			var mCell = document.createElement("td");
			var mText = document.createTextNode(array[j + CourseInf.iCount]);

			mCell.appendChild(mText);
			mTr.appendChild(mCell);
		}
		CourseInf.iCount += j;
		mBody.appendChild(mTr);
	}
	table.appendChild(mBody);
};

CourseInf.writeTable = function (obj, table) {
	var array = [];
	var className = obj.value;

	var iAcc = 0;
	var rowNum = 0;
	var str = "";

	for (var i = 0; i < CourseInf.gradeArrays.length; i++) {

		for (var key in CourseInf.gradeArrays[i]) {
			if (CourseInf.gradeArrays[i][key] == className){
				CourseInf.flag = true;
				rowNum++;
			}
			else {
				if (CourseInf.flag) {
					array[key] = CourseInf.gradeArrays[i][key];
				}
			}

		}
		CourseInf.flag = false;		

		if (rowNum != 0) {
			for (var j in array) {
				str = array[j];
				CourseInf.classArrays[iAcc] = str;

				iAcc++;
			}
			CourseInf.insertTable(4, 1, CourseInf.classArrays, table);

		}

		rowNum = 0;
	}

	CourseInf.iCount = 0;
};

CourseInf.readClasses = function (obj) {
	var table = document.getElementById("tb1");

	CourseInf.deleteTable(table);
	CourseInf.writeTable(obj, table);
};

CourseInf.loadData = function (array) {
	var data = [];
	var vals = [];

	CourseInf.gradeArrays = array;

	var obj = document.getElementById("className");

	// json 中键值为"cName"的value值放到数组中
	for (var i = 0; i < array.length; i++) {
		for (var j in array[i]) {
			if (j == "cName")
				data.push(array[i][j]);
		};
	}

	// 删除重复项
	vals = _uniq(data);

	// Traverse Array
	for (var i = 0; i < vals.length; i++) {
		obj.options.add(new Option(vals[i], vals[i]));
	};

};

_toObj = function (array) {
	var obj = new Array();

	for (var i = 0; i < array.length; i++) {
		obj[array[i]] = true;
	}

	return obj;
};

_keys = function (obj) {
	var array = new Array();

	for (var i in obj) {
		if (obj.hasOwnProperty(i)) {
			array.push(i);
		};
	}

	return array;
};

_uniq = function (array) {
	return _keys(_toObj(array));
};
时间： 2024-12-09 00:08:59

动态生成表格 - javascript的相关文章

Javascript动态生成表格的性能调优

    vision 0.8 [耗时672ms]终极优化 将字符串作为数组对象的方式是目前效率最高,性能最优的方式.   <script> var t1 = new Date(); </script> <html> <head> <title></title> <script> function testTime(){ var t2 = new Date(); alert(t2-t1+"ms"); }

JS实现动态生成表格并向后端提交表格数据（一）

前段时间开发了一些web应用,其中就有涉及到动态的表格问题,因为很久没有写web前端了,所以在网上找了一些资料,发现很零碎,于是自己就根据找到的资料写了这么一个小功能,主要是供自己记忆,如果能帮到你很荣幸,如果你有更好的方法,也可以相互讨论,相互学习一下. 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. 1 <script src="../js

0166 DOM 之 节点操作： 删除节点，删除留言案例，复制（克隆）节点，动态生成表格案例，创建元素的三种方式，innerHTML和createElement效率对比

1.1.1 删除节点 node.removeChild(child) // 此处的node指 父节点 node.removeChild() 方法: 从 node节点中删除一个子节点,返回删除的节点. <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 va

Android动态生成表格

最近刚刚学习完Android的五大布局,现在我们进一步深入学习,尝试做一个动态生成表格功能的例子 样式布局代码如下: 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4

JS动态生成表格后 合并单元格

JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单元格操作,在做之前也试着google下,但是网上没有碰到这方面的需求,所以自己写了一个简单的.用文字描述需求太费劲了,如下图所示: 1. 没有合并之前的图如下: 2. 合并之后的图如下: 如上所示:是根据相邻的编号相同 进行单元格合并. 先看看实现后的效果再聊吧! JSfiddle链接地址如下: 点

js动态生成表格(原创)

原文:js动态生成表格(原创) 源代码下载地址:http://www.zuidaima.com/share/1571860936543232.htm 原生js实现,兼容各主流浏览器,提供生成表格,修改表格,验证合法性功能,可做学习参考 版权声明:本文为博主原创文章,未经博主允许不得转载.

Extjs 动态生成表格

Extjs 动态生成表格 在web显示数据时,会遇到grid的列数和行数不确定的这种情况.如何来根据数据动态的创建表格呢?Extjs 的json data给我们带来了一个很好的比较简单的方法.  要创建一个grid需要确定它的列数,再根据数据的数量就可以确定行数了.  看到有人用过一种方法就是讲列的属性和数据一起放在json data里去,这样可以达到效果,但是不难发现,这样的话,就很难进行分页或者更新表格里的数据.  其实我们可以结合extjs官网上的那种固定列数的访问方法来动态生成表格.  

JS实现动态生成表格并提交表格数据向后端 表格中数据转为json

原文地址 需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面div中事先创建一个空白表格,可以根据需求而定,我这里是一个带表头的表格 <table border="0" style="text-align: center;" width="100%" id="myTable">

C#实现动态生成表格的方法

本文以实例形式展现了C#实现动态生成表格的方法,分享给大家供大家参考之用.具体方法如下: public string CreateTable() { StringBuilder sb = new StringBuilder(""); int row = 1;//行数 if (true )//是否有数据 { int nRowCount = 10;//所有条数 row = (int)Math.Ceiling(nRowCount / 5.0);//5.0表示每行有多少条数据 int colN