级联对象组成的数组便利成级联数据显示

html-css013

级联对象组成的数组便利成级联数据显示,第1张

你看这样,我在原来的代码中尽量逐行加上注释加以说明,然后你再自己去改下,有问题再追问

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

table {

border: 1px solid #999

border-collapse: separate

border-spacing: 0

padding: 0

margin: 0

font-size: 16px

line-height: 100%

font-family: 微软雅黑, 宋体, Arial, sans-serif

width: 600px

}

tr {

border: 1px solid #999

}

th {

border: 1px solid #999

background: #F1A3FF

padding: 4px 2px

}

td {

border: 1px solid #999

padding: 1px 2px

}

</style>

</head>

<body>

<div style="text-align: center margin: auto">

<table style="margin: auto">

<thead>

<tr>

<th>名称</th>

<th>所在班级</th>

<th>参考时间</th>

<th>考试成绩</th>

<th>缺考</th>

</tr>

</thead>

<tbody id="myTbody">

</tbody>

</table>

</div>

</body>

<script src="js/jquery-1.6.4.js" type="text/javascript"></script>

<script type="text/javascript">

var items = [ {

schoolId : "XL001",

schoolName : "南京中学",

classId : "BJ001",

className : "初三二班",

stuId : "XY001",

stuName : "张三",

date : "2014-9-7",

score : 0,

isAbsent : true

}, {

schoolId : "XL001",

schoolName : "南京中学",

classId : "BJ001",

className : "初三二班",

stuId : "XY002",

stuName : "王五",

date : "2014-9-7",

score : 70,

isAbsent : false

}, {

schoolId : "XL001",

schoolName : "南京中学",

classId : "BJ002",

className : "初一三班",

stuId : "XY003",

stuName : "李斯",

date : "2014-9-7",

score : 30,

isAbsent : false

}, {

schoolId : "XL001",

schoolName : "南京中学",

classId : "BJ002",

className : "初一三班",

stuId : "XY004",

stuName : "赵丽",

date : "2014-9-7",

score : 50,

isAbsent : false

}, {

schoolId : "XL001",

schoolName : "南京中学",

classId : "BJ003",

className : "初一五班",

stuId : "XY005",

stuName : "宋七",

date : "2014-9-7",

score : 80,

isAbsent : false

}, {

schoolId : "XL001",

schoolName : "南京中学",

classId : "BJ004",

className : "初二三班",

stuId : "XY006",

stuName : "朱扒皮",

date : "2014-9-7",

score : 90,

isAbsent : false

} ]

// 分别用来存储最后一条记录的学校ID和班级ID

var lastSchoolId, lastClassId

/**

 * 计算上个班级所有学生分数和,并更新考试成绩

 *

 * 相关注释略,参见学校分数计算和更新

 */

function calculateClassScore() {

var lastClass_chlildren = $("#myTbody tr[name=tr_class]").last().nextAll("[name=tr_student]")

var lastClass_sumOfScore = 0

for (var j = 0 j < lastClass_chlildren.length j++) {

lastClass_sumOfScore += parseInt($(lastClass_chlildren[j]).children(":eq(3)").text())

}

$("#myTbody tr[name=tr_class]").last().children("td:eq(3)").text(lastClass_sumOfScore)

}

/**

 * 计算上个学校所有班级分数和,并更新考试成绩

 */

function calculateSchoolScore() {

// 根据name属性获得所有学校行,通过last方法获得最后一行学校,nextAll得到的是学校行后所有的班级行

var lastSchool_classes = $("#myTbody tr[name=tr_school]").last().nextAll("[name=tr_class]")

// 定义学校分数和

var lastSchool_sumOfScore = 0

// 遍历所有班级,计算总分

for (var j = 0 j < lastSchool_classes.length j++) {

// 总分即是每个班级行的第四个TD下的内容,在通过parseInt取整

lastSchool_sumOfScore += parseInt($(lastSchool_classes[j]).children(":eq(3)").text())

}

// 更新学校行的第四个TD的文本

$("#myTbody tr[name=tr_school]").last().children("td:eq(3)").text(lastSchool_sumOfScore)

}

$(function() {

// 遍历每一个对象

for (var i = 0 i < items.length i++) {

//

var item = items[i]

// 如果当前对象学校与上一对象的学校不一致

if (lastSchoolId != item.schoolId) {

// 由于已排序,那么表示上个学校的所有数据已添加完成

// 计算上一个学校的总分

// 即所有班级分数之和

calculateSchoolScore()

// 增加一行学校

// 同时为该行(TR)设置name属性,标记该行是学校

$("#myTbody").append(

"<tr name='tr_school'><td style='text-align: left'>" + item.schoolName

+ "</td><td></td><td></td><td></td><td></td></tr>")

}

// 如果当前对象班级与上一对象的班级不一致

if (lastClassId != item.classId) {

// 由于已排序,那么表示上个班级的所有数据已添加完成

// 计算上一个班级的总分

// 即所有学生分数之和

calculateClassScore()

// 增加一行班级

// 同时为该行(TR)设置name属性,标记该行是学校

$("#myTbody").append(

"<tr name='tr_class'><td style='text-align: left'>&nbsp&nbsp&nbsp&nbsp" + item.className

+ "</td><td></td><td></td><td></td><td>无</td></tr>")

}

// 如果该学生缺考

if (item.isAbsent) {

// 则将班级缺考设置为“有”

$("#myTbody tr[name=tr_class]").last().children("td:eq(4)").text("有")

}

// 增加一行记录

// 同时为该行(TR)设置name属性,标记该行是学生成绩

$("#myTbody").append(

"<tr name='tr_student'>"

+ "<td style='text-align: left'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"

+ item.stuName + "</td>" + "<td>" + item.className + "</td>" + "<td>" + item.date + "</td>"

+ "<td>" + item.score + "</td>" + "<td></td>" + "</tr>")

// 更新最后一行的学校与班级

lastSchoolId = item.schoolId

lastClassId = item.classId

}

// 当完成最后一条记录的添加时,计算最后一个班级及学校分数

calculateClassScore()

calculateSchoolScore()

// 隔行换色

$("tr:odd").css("background-color", "#EEE")

$("tr:even").css("background-color", "#fff")

})

</script>

</html>

1. Summary:

during the time I practice for XX company from july 21th to august21th,2011,I work hard in the compay with the help of my master ,i think the theory and practice are the same important, i put knowledge i learn in college into prictice to make the work more wondeful,i learn more form my practice work. at the same time ,i was become more creative and independently thinking in the work,i change the state to get more and i use the professional knowledge to solve the problems in the work,

in a word,it is a valus in my life, i learn more from it,and lay a solid foundation to my further job~~

能力有限,下次再来看看~~