【ife】任务三十九：UI组件之冻结行列表格

window.onload = function() {
var students = [];
students[0] = new Student("小A", 80, 90, 70);
students[1] = new Student("小B", 90, 60, 90);
students[2] = new Student("小C", 60, 100, 70);
students[3] = new Student("小D", 70, 80, 80);
students[4] = new Student("小E", 100, 70, 60);
students[5] = new Student("小F", 60, 100, 80);
students[6] = new Student("小G", 70, 90, 90);
students[7] = new Student("小H", 80, 80, 100);
students[8] = new Student("小I", 90, 70, 60);
students[9] = new Student("小J", 100, 60, 70);
createTable(students);
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
var id = this.getAttribute("id");
if (id.indexOf("Up") != -1)
upSort(students, id.slice(0, -2));
else
downSort(students, id.slice(0, -4));
clearTable();
createTable(students);
}
}
var flag = 0;
document.onscroll = function() {
var table = document.getElementsByTagName("table")[0];
var th = table.getElementsByTagName('tr')[0];
if (table.offsetTop <= document.body.scrollTop) {
th.style.position = 'fixed';
th.style.top = '0px';
if (flag == 0) {
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.position = 'fixed';
if (i % 2 == 0)
imgs[i].style.top = '8px';
else
imgs[i].style.top = '18px';
}
flag = 1;
}
if (document.body.scrollTop > table.offsetHeight + 622) {
th.style.position = 'relative';
if (flag == 1) {
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.position = 'absolute';
if (i % 2 == 0)
imgs[i].style.top = '654px';
else
imgs[i].style.top = '664px';
}
flag = 0;
}
}
}
else {
th.style.position = 'relative';
if (flag == 1) {
for (var i = 0; i < imgs.length; i++) {
imgs[i].style.position = 'absolute';
if (i % 2 == 0)
imgs[i].style.top = '654px';
else
imgs[i].style.top = '664px';
}
flag = 0;
}
}
};
}
function Student(name, math, Chinese, English) {
this.name = name;
this.math = math;
this.Chinese = Chinese;
this.English = English;
this.total = math + Chinese + English;
}
function createTable(students) {
var table = document.getElementsByTagName("table")[0];
var tr = "";
for (var i = 0; i < students.length; i++)
tr += '<tr><td>' + students[i].name + '</td><td>' + students[i].math + '</td><td>' + students[i].Chinese + '</td><td>' + students[i].English + '</td><td>' + students[i].total +'</td></tr>'
table.innerHTML += tr;
}
function clearTable(students) {
var table = document.getElementsByTagName("table")[0];
table.innerHTML = "<tr><th>姓名</th><th>数学</th><th>语文</th><th>英语</th><th>总分</th></tr>";
}
function upSort(students, key) {
students.sort(function(student1, student2) {
return student1[key] - student2[key];
});
return students;
}
function downSort(students, key) {
students.sort(function(student1, student2) {
return student2[key] - student1[key];
});
return students;
}