码迷，mamicode.com
首页 > 编程语言 > 详细

动态生成表格 - javascript

时间：2015-04-19 18:00:36      阅读：244      评论：0      收藏：0      [点我收藏+]

标签：

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


动态生成表格 - javascript

标签：

原文地址：http://blog.csdn.net/xiaobin_hlj80/article/details/45129447
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！