面向对象案例表格排序--函数做返回值

发表于 | 更新于: | 分类于 | | 热度 ℃

重点

1.数组的创建，添加，调用，输出
2.构造函数，原型方法添加，函数的调用
3.函数做返回值做数组的排序
4.元素的创建，添加，调用，获取，清除
5.innerHtml的使用

效果



素材





案例代码

Css (外部引入) style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*
 * @Author: yhf 
 * @Date: 2018-09-12 20:43:23 
 * @Last Modified by: yhf
 * @Last Modified time: 2018-09-12 23:23:48
 */
/* 初始化页面 */
* {
    padding: 0;
    margin: 0;
}
/* 表格 */
table {
    position: relative;
    top: 100px;
    left: 100px;
    width: 800px;
}
/* 表头 */
th {
    height: 50px;
    cursor: pointer;
}
/* 表格 */
td {
    text-align: center;
}

Html

1
<table border="1" cellspacing="0" cellpadding="0"></table>

Js(外部引入) index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/*
 * @Author: yhf 
 * @Date: 2018-09-12 20:47:37 
 * @Last Modified by: yhf
 * @Last Modified time: 2018-09-12 23:16:19
 */

// 参数数组
let movieArray = [{
    img: "bianxingjingang.jpg",
    movieName: "变形金刚",
    star: "希亚·拉伯夫",
    direct: "迈克尔·贝",
    type: "d动作",
    time: "2007年07月03日"
},
{
    img: "qiannvyouhun.jpg",
    movieName: "倩女幽魂",
    star: "张国荣",
    direct: "程小东",
    type: "j惊悚",
    time: "1987年7月18日"
},
{
    img: "gongfu.jpg",
    movieName: "功夫",
    star: "周星驰",
    direct: "周星驰",
    type: "x喜剧",
    time: "2014年12月24日"
},
{
    img: "suduyujiqing.jpg",
    movieName: "速度与激情",
    star: "保罗·沃克",
    direct: "罗伯·科恩",
    type: "d动作",
    time: "2015年4月3日"
},
{
    img: "dahuaxiyou.jpg",
    movieName: "大话西游",
    star: "周星驰",
    direct: "刘镇伟",
    type: "a爱情",
    time: "2014年10月24日"
}
];
// 获取元素的函数
function $my(date) {
    return document.querySelector(date);
};

// 创建构造函数
function Person(date) {
    this.table = $my(date);
};

// 添加原型方法 初始化
Person.prototype.init = function (date) {
    // 初始化表头
    this.initThead();
    // 初始化表格内容
    this.initTbody(date);

    this.initPx(date)
};

// 添加原型方法 添加表头
Person.prototype.initThead = function () {
    //先创建一个thead标签,创建tr-th,立刻加入到table中
    var thead = document.createElement("thead");
    // 给表头添加资料
    thead.innerHTML = '<tr><th falg="img">影片</th><th falg="star">主演</th><th falg="direct">导演</th><th falg="type">类别</th><th falg="time">上映时间</th></tr>';
    // 添加到表格
    this.table.appendChild(thead);
};

// 添加原型方法 添加表格内容 刷新页面
Person.prototype.initTbody = function (date) {
    // 刷新页面，判断有id等于tob的时候删除
    if ($my("#tob")) {
        this.table.removeChild($my("#tob"));
    }
    // 创建tbody
    let tbody = document.createElement("tbody");
    // 添加id
    tbody.id = "tob";
    // 装数据的数组
    let arr=[];
    for (let i = 0; i < date.length; i++) {
        const ele = date[i];
        // 把数组的数据拿出来添加到新的数组
        arr.push("<tr><td><img src=images/" + ele.img + "> <br />" + ele.movieName + "</td><td>" + ele.star + "</td><td>" + ele.direct + "</td><td>" + ele.type + "</td><td>" + ele.time + "</td></tr>");
    }
    // 把新数组中的元素拿出来添加到tbody  join是控制连接符 “”是空，表示没有链接符
    tbody.innerHTML = arr.join("");
    // 把tbody添加到表格里面
    this.table.appendChild(tbody);
};

// 添加原型方法 数组排序
Person.prototype.Szpx = function (date,attr) {
    function fn(attr) {
        return function (obj1,obj2) {
            if (obj1[attr] > obj2[attr]) {
                return 1;
            } else if (obj1[attr] == obj2[attr]) {
                return 0;
            } else {
                return -1;
            }
        }
    }
    let ff = fn(attr);
    date.sort(ff);
}

// 添加原型方法 获取点击元素判断排序值
Person.prototype.initPx = function (date) {
    // 获取每一个表头的th
    let ths = document.querySelectorAll("th");
    // 定义this
    let that = this;
    // 循环添加点击事件
    for (let i = 0; i < ths.length; i++) {
        const ele = ths[i];
        ele.onclick = function () {
            // 获取定义值
            let falg = this.getAttribute("falg");
            // 调用数组排序方法
            that.Szpx(date,falg);
            // 调用刷新页面
            that.initTbody(date);
        }
    }
}

// new实例对象
let pr = new Person("table");
// 调用实例的原型方法
pr.init(movieArray);
-------------本文结束感谢您的阅读-------------
0%