面向对象的案例表格的排序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对自己狠点</title>
<style>
    table{
        width: 800px;
    }
    th{
        height: 50px;
        cursor: pointer;
    }
    td{
        text-align: center;
    }
</style>
</head>
<body>
<table id="tab" border="1" cellspacing="0" cellpadding="0">
</table>
<script>

//是数组---对象
var movieArray=[
    {
        img:"bianxingjingang.jpg",
        movieName:"b变形金刚",
        star:"x希亚·拉伯夫",
        direct:"m迈克尔·贝",
        type:"d动作",
        time:"2007年07月03日"
    },
    {
        img:"qiannvyouhun.jpg",
        movieName:"q倩女幽魂",
        star:"z张国荣",
        direct:"c程小东",
        type:"j惊悚",
        time:"1987年7月18日"
    },
    {
        img:"gongfu.jpg",
        movieName:"g功夫",
        star:"z周星驰",
        direct:"z周星驰",
        type:"x喜剧",
        time:"2014年12月24日"
    },
    {
        img:"suduyujiqing.jpg",
        movieName:"s速度与激情",
        star:"b保罗·沃克",
        direct:"l罗伯·科恩",
        type:"d动作",
        time:"2015年4月3日"
    },
    {
        img:"dahuaxiyou.jpg",
        movieName:"d大话西游",
        star:"z周星驰",
        direct:"l刘镇伟",
        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=movieImages/" + 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);


</script>
</body>
</html>
面向对象的案例表格的排序

猜你喜欢
