学习js高级第四天

表格排序:
因为不知道怎么循环添加不同的td中的不同内容,边写的很麻烦
代码:
<!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">
    <img src="" alt="">
</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日"
        }
    ];
    var table=document.getElementById("tab")
    var arr=["影片","主演","导演","类别","上映时间"]
    var tr1=document.createElement("tr");
    table.appendChild(tr1);
    for (var i=0;i<5;i++){
        var th=document.createElement("th");
        tr1.appendChild(th)
        th.className="th"+i;
        th.innerHTML=arr[i];
    }
    function f1() {

        for (var i=0;i<movieArray.length;i++){
            var tr=document.createElement("tr");
            table.appendChild(tr);
            tr.id="tr"+i;
            var td1=document.createElement("td");
            tr.appendChild(td1);
            td1.innerHTML="<div>"+"<img src='"+"movieImages/"+movieArray[i].img+"' alt=''>"+"</div>"+movieArray[i].movieName;

            var td2=document.createElement("td");
            tr.appendChild(td2);

            td2.innerHTML=movieArray[i].star;
            var td3=document.createElement("td");
            tr.appendChild(td3);

            td3.innerHTML=movieArray[i].direct;
            var td4=document.createElement("td");
            tr.appendChild(td4);

            td4.innerHTML=movieArray[i].type;
            var td5=document.createElement("td");
            tr.appendChild(td5);

            td5.innerHTML=movieArray[i].time;
        }
    }
    f1();
    var th=document.getElementsByTagName("th")
    var trs=document.getElementsByTagName("tr")
    for (var i=0;i<th.length;i++){
        th[i].onclick=function () {
            if (this.className=="th0") {
                for (var j=1;j<trs.length;j++){
                    table.removeChild(trs[j]);
                    j--;
                }
                var ff=fn("movieName")
                movieArray.sort(ff);
                f1();
            }else if (this.className=="th1") {
                for (var j=1;j<trs.length;j++){
                    table.removeChild(trs[j]);
                    j--;
                }
                var ff=fn("star")
                movieArray.sort(ff);
                f1();
            }else if (this.className=="th2") {
                for (var j=1;j<trs.length;j++){
                    table.removeChild(trs[j]);
                    j--;
                }
                var ff=fn("direct")
                movieArray.sort(ff);
                f1();
            }else if (this.className=="th3") {
                for (var j=1;j<trs.length;j++){
                    table.removeChild(trs[j]);
                    j--;
                }
                var ff=fn("type")
                movieArray.sort(ff);
                f1();
            }else if (this.className=="th4") {
                for (var j=1;j<trs.length;j++){
                    table.removeChild(trs[j]);
                    j--;
                }
                var ff=fn("time")
                movieArray.sort(ff);
                f1();
            }

        }
    }

    //排序
    function fn(attr) {
        return function getSort(a,b) {
            if (a[attr]>b[attr]){
                return 1;
            } else if(a[attr]==b[attr]){
                return 0;
            }else{
                return -1;
            }
        }
    }
</script>
</body>
</html>
学习js高级第四天

猜你喜欢
