10V

最近在做中国教育在线的培训机构项目，开发工作中需要做一个开课时间表， 效果图如下所示：

如果直接写html代码，麻烦是麻烦点，但是这个表单很好实现。这两天在看jquery的相关知识，发现其中的$.each()这个函数功能十分强大，这里先对$.each()函数做个简单介绍，然后在给大家看一下，我是如何用$.each()这个函数实现上面这个表单的。

$.each()函数封装了十分强大的遍历功能，它可以遍历一维数组、多维数组、DOM, JSON 等等，在javascript开发过程中使用$each可以大大的减轻我们的工作量。下面看几个例子：

var arr1 = [ "one", "two", "three", "four", "five" ];
$.each(arr1, function(){
    alert(this);
});
//输出：one   two  three  four   five

var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
    alert(item[0]);
});
//输出：1   4   7

var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
    alert(obj[key]);
});
//输出：1   2  3  4  5

//引入jquery，根据你的jquery文件的不同路径，做出相应的替换，
<script type="text/javascript" src="/js/jquery-1.3.min.js"></script>

var weekday = ['','周一','周二','周三','周四','周五','周六','周日'];

var day = ['','上午','下午','晚上'];

var table = document.createElement('table');

$(table).attr({ width:"400", border:"0", cellpadding:"0", cellspacing:"1", bgcolor:"#CCCCCC"});
$.each(day, function(key, val) {
	var row = table.insertRow(key);
	if(key == 0) {
	       $.each(weekday, function(m, n) { n = n || ' '; $(row.insertCell(m)).html(n); });
	}
        else {
	       $.each(weekday, function(m, n) { n = !n?day[key]:'<input type="checkbox" name="classtime[]" />'; $(row.insertCell(m)).html(n); });
	}
});

//在id=calendarDiv的那个DIV中嵌入上面的代码
$('#calendarDiv').append(table);

效果如下所示:

作者: 石巍
原载: 10V
版权所有，转载时必须以超链接形式注明作者和原始出处及本声明。

本文链接: http://www.smartwei.com/jquery-each-function.html