表格排序:
因为不知道怎么循环添加不同的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>