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

最新推荐文章于 2022-08-30 11:23:49 发布

筱葭

最新推荐文章于 2022-08-30 11:23:49 发布

阅读量472

点赞数 1

文章标签：百度前端技术学院 ife HTML CSS JavaScript

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/54379688

版权

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;
}