js高级面向对象之表格点击排序

面向对象是js的必修部分,关于此部分是否熟练运用也是重中之重,今天写了个关于面向对象的案例,比较有意思,是关于一个表格的排序,触发事件是点击thead的每个th会对表格进行一般排序

由于所有的东西都是js动态添加,所以html部分的代码只有一个table,就不发了
css代码如下:

     	  table {
            width: 800px;
        }
    
        th {
            height: 50px;
            cursor: pointer;
        }
    
        td {
            text-align: center;
        }

js部分
第一步:封装常用函数

function my$(id) {
return document.getElementById(id);
}
function myA(TagName) {
return document.getElementsByTagName(TagName);
}
function myC(className) {
return document.getElementsByClassName(className);
}
function getNum(attr) {
return function getSort(a, b) {
if (a[attr] > b[attr]) {
return 1;
} else if (a[attr] == b[attr]) {
return 0;
} else {
return -1;
}
}
}

其中getNum是按照数组中的对象的名为attr的键的值按照一般顺序排序,用法如下:

var str=[“对象1”,“对象2”,“对象3”…]
var fff=getNum(attr)
var str=movieArray.sort(fff)

第二步:创建静态表格

var tab = my$(“tab”)
var tbody = document.createElement(“tbody”)
tab.appendChild(tbody)
var thaed = document.createElement(“thead”)
tab.appendChild(thaed);
for (var j = 0; j < 5; j++) {
var th = document.createElement(“th”)
thaed.appendChild(th);
var ths = thaed.children;
}
ths[0].innerHTML=“电影”
ths[1].innerHTML=“主演”
ths[2].innerHTML=“导演”
ths[3].innerHTML=“类别”
ths[4].innerHTML=“上映时间”
var tds;
var trs;
function getBiao(x) {
tbody.innerHTML=""
for (var i = 0; i < movieArray.length; i++) {
var tr = document.createElement(“tr”)
tbody.appendChild(tr);
trs = tbody.children;
var caiLiao = x[i]
for (var j = 0; j < 5; j++) {
var td = document.createElement(“td”)
tr.appendChild(td);
tds = tr.children;
td.className=“td”+i
}
var srcc = caiLiao.img
var img = document.createElement(“img”)
var p = document.createElement(“p”)
tds[0].appendChild(img);
tds[0].appendChild§;
img.src = srcc
p.innerHTML = x[i].movieName
tds[1].innerHTML = x[i].star
tds[2].innerHTML = x[i].direct
tds[3].innerHTML = x[i].type
tds[4].innerHTML = x[i].time
}
}
getBiao(movieArray);

其中getBiao(x)是根据数组x中的对象的健值来制作表格
封装制表函数和在其中添加tbody=""都是为了后面的点击排序做准备

第三步:循环的给每个th添加点击事件,同时使用排序函数,制表函数,将经过排序的新表格制作出来;

var shuXing=[“movieName”,“star”,“direct”,“type”,“time”]
var index;
for (var i=0;i<movieArray.length;i++){
ths[i].setAttribute(“index”,i)
ths[i].onclick=function () {
index=this.getAttribute(“index”)
var fff=getNum(shuXing[index])
var sttr=movieArray.sort(fff)
console.log(sttr);
getBiao(sttr);
}
}

最后大功告成,排序函数比较难懂,可以多研究一下,其他的比较简单,属于运用熟练就可以轻松解决的问题,

ps:纯属原创,抄袭必究