<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css"/>
<style>
table {
margin: 50px;
width: 800px;
border: 1px solid #89b929;
border-collapse: separate;
border-spacing: 0;
}
th, td {
border: 1px solid #89b929;
font-size: 16px;
text-align: center;
}
th {
font-weight: 900;
}
</style>
</head>
<body>
<table class="map">
</table>
<script>
var titleArray = ["影片", "主演", "导演", "类别", "上映时间"];
var sortArray = ["img", "star", "direct", "type", "time"];
var movieArray = [
{
img: ["bianxingjingang.jpg", "变形金刚"],
star: "希亚·拉伯夫",
direct: "迈克尔·贝",
type: "d动作",
time: "2007年07月03日"
},
{
img: ["qiannvyouhun.jpg", "倩女幽魂"],
star: "张国荣",
direct: "程小东",
type: "j惊悚",
time: "1987年7月18日"
},
{
img: ["gongfu.jpg", "功夫"],
star: "周星驰",
direct: "周星驰",
type: "x喜剧",
time: "2014年12月24日"
},
{
img: ["suduyujiqing.jpg", "速度与激情"],
star: "保罗·沃克",
direct: "罗伯·科恩",
type: "d动作",
time: "2015年4月3日"
},
{
img: ["dahuaxiyou.jpg", "大话西游"],
star: "周星驰",
direct: "刘镇伟",
type: "a爱情",
time: "2014年10月24日"
}
];
var table = document.querySelector(".map");
var tbodyArray = [];
//创建表格构造函数
function CreateTable() {
}
//初始化表格
CreateTable.prototype.init = function () {
this.createHead();
this.createBody();
this.addevent();
};
//创建表格头部加入原型对象
CreateTable.prototype.createHead = function () {
var thead = document.createElement("thead");
table.appendChild(thead);
var tr = document.createElement("tr");
thead.appendChild(tr);
for (var i = 0; i < titleArray.length; i++) {
var th = document.createElement("th");
th.style.cursor = "pointer";
//添加排序
th.setAttribute("flag", sortArray[i]);
tr.appendChild(th);
th.innerHTML = titleArray[i];
th.style.height = "60px";
th.onmousemove = mousemove;
th.onmouseout = mouseout;
}
//添加进入离开事件
function mousemove() {
this.style.backgroundColor = "#19cc9f"
}
function mouseout() {
this.style.backgroundColor = "";
}
};
//创建表格body
CreateTable.prototype.createBody = function () {
this.removeTbody();
var tbody = document.createElement("tbody");
tbodyArray.push(tbody);
table.appendChild(tbody);
for (var i = 0; i < movieArray.length; i++) {
//根据列表长度创建tr
var tr = document.createElement("tr");
tbody.appendChild(tr);
tr.onmousemove = mousemove;
tr.onmouseout = mouseout;
for (var key in movieArray[i]) {
var td = document.createElement("td");
tr.appendChild(td);
if (key == "img") {
var img = document.createElement("img");
td.appendChild(img);
var br = document.createElement("br");
td.appendChild(br);
img.src = "../img7/" + movieArray[i][key][0];
var span = document.createElement("span");
td.appendChild(span);
span.innerHTML = movieArray[i][key][1];
} else {
td.innerHTML = movieArray[i][key];
}
}
}
function mousemove() {
this.style.backgroundColor = "yellow";
}
function mouseout() {
this.style.backgroundColor = "";
}
};
//movieArray 数组排序
CreateTable.prototype.sortMovieByAttribute = function (attr) {
movieArray.sort(function (obj1, obj2) {
//obj1 下标1到最后
//obj2 下标0到倒数第二个
if (obj1[attr] > obj2[attr]) {
return 1;
} else if (obj1[attr] === obj2[attr]) {
return 0;
} else {
return -1;
}
})
};
//给每个th添加点击事件
CreateTable.prototype.addevent = function () {
var ths = document.getElementsByTagName("th");
var that = this;
for (var i = 0; i < ths.length; i++) {
ths[i].onclick = thClick;
}
function thClick() {
var flag = this.getAttribute("flag");
that.sortMovieByAttribute(flag);
//对排序好的movieArray 进行重新初始化
that.createBody();
}
};
//删除tbody,保证tbody唯一性
CreateTable.prototype.removeTbody = function () {
function remove() {
for (var i = 0; i < tbodyArray.length; i++) {
var ele = tbodyArray[i];
ele.parentNode.removeChild(ele);
}
tbodyArray.length = 0;
}
remove();
};
var tt = new CreateTable();
tt.init();
</script>
</body>
</html>
js表格2
最新推荐文章于 2024-01-03 15:32:34 发布