js表格2

最新推荐文章于 2024-01-03 15:32:34 发布

范2小青年

最新推荐文章于 2024-01-03 15:32:34 发布

阅读量106

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/u014805482/article/details/84344338

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>

在这里插入图片描述

范2小青年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js表格2

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" type="text/
复制链接

扫一扫

专栏目录