用面对对象的方式点击表头排序

最新推荐文章于 2021-03-02 09:18:52 发布

Hathaway-Giser

最新推荐文章于 2021-03-02 09:18:52 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/qq_27451741/article/details/86615652

版权

图片样式为这个，Table是用js动态创建的，要求为点击表头排序
在这里插入图片描述

这里是css样式

    <!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;
                width: 160px;

            }
        </style>
    </head>
    <body>
    <table id="tab" border="1" cellspacing="0" cellpadding="0">
    </table>
    <script>

把要输入的内容放到数组里，通过数组添加元素，
//是数组—对象
var movieArray=[
{
img:“movieImages/bianxingjingang.jpg”,
movieName:“b变形金刚”,
star:“x希亚·拉伯夫”,
direct:“m迈克尔·贝”,
type:“d动作”,
time:“2007年07月03日”
},
{
img:“movieImages/qiannvyouhun.jpg”,
movieName:“q倩女幽魂”,
star:“z张国荣”,
direct:“c程小东”,
type:“j惊悚”,
time:“1987年7月18日”
},
{
img:“movieImages/gongfu.jpg”,
movieName:“g功夫”,
star:“z周星驰”,
direct:“z周星驰”,
type:“x喜剧”,
time:“2014年12月24日”
},
{
img:“movieImages/suduyujiqing.jpg”,
movieName:“s速度与激情”,
star:“b保罗·沃克”,
direct:“l罗伯·科恩”,
type:“d动作”,
time:“2015年4月3日”
},
{
img:“movieImages/dahuaxiyou.jpg”,
movieName:“d大话西游”,
star:“z周星驰”,
direct:“l刘镇伟”,
type:“a爱情”,
time:“2014年10月24日”
}
];

创建对象：1；创建表格对象，表格对象初始化
2，表格对象点击方法

               >  ((function () {
        var elements=[];
            function Table1(th){
                this.th=th;
            }
            Table1.prototype.init=function () {
              elements=[];
                //创建表格
                var arr=["影片", "主演", "导演", "类别", "时间",];
                var table=document.getElementById("tab");
            //判断是否有表格
            if(table.innerHTML){
            table.innerHTML="";
            }
                var thead=document.createElement("thead");
                table.appendChild(thead);
                for(var i=0;i<5;i++){
                     this.th=document.createElement("th");
                    thead.appendChild(this.th);
                    this.th.innerText=arr[i];
                 elements.push(this.th);

                }
                var tbody=document.createElement("tbody");
                table.appendChild(tbody);
                for(var j=0;j<movieArray.length;j++){

                    var tr=  document.createElement("tr");
                    tbody.appendChild(tr);
                    var td1=document.createElement("td");
                    tr.appendChild(td1);
                    td1.innerHTML="<img src=\""+movieArray[j].img+"\" alt=\"\">"+movieArray[j].movieName;
                    td1.className="0";
                    var td2=document.createElement("td");
                    tr.appendChild(td2);
                    td2.className="1";
                    td2.innerText=movieArray[j].star;
                    var td3=document.createElement("td");
                    tr.appendChild(td3);
                    td3.className="2";
                    td3.innerText=movieArray[j].direct;
                    var td4=document.createElement("td");
                    tr.appendChild(td4);
                    td4.className="3";
                    td4.innerText=movieArray[j].type;
                    var td5=document.createElement("td");
                    tr.appendChild(td5);
                    td5.className="4";
                    td5.innerText=movieArray[j].time;
                }
                this.click();
            };

            Table1.prototype.click=function(){
                var arr1=["movieName","star","direct","type","time"];
                var that=this;
                for(var j=0;j<elements.length;j++){
                    elements[j].setAttribute("index",j);
               elements[j].onclick=function () {
                   var index=this.getAttribute("index");
                   console.log(arr1[index]);
                 movieArray.sort(Paixu(arr1[index]));
                   console.log(arr1[index]);
                   that.init();
                };

                }
                //排序函数
                function Paixu(attr) {
                    return  function getSort(a,b){
                        if(a[attr]>b[attr]){
                            return 1;
                        }else if(a[attr]==b[attr]){
                            return 0;
                        }else{
                            return -1;
                        }
                    }
                }}

            ;

            window.Table1=Table1;
            })());