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

图片样式为这个，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;})());

用面对对象的方式点击表头排序相关推荐

php 点击表头排序,点击表头切换升降序排序方式
需求: 在报表的实际应用中有很多客户希望可以通过点击表头切换该列数据的排序. 实现方式: 超链接结合参数以及单元格表达式来实现,具体举例如下原表样如下实现原理:通过点击第一行任意格的值,通过 A2 ...
CList 点击表头排序（1）SortItems函数
点击表头排序整体的思路都是去 CListCtrl类中的方法SortItems去实现 CListCtrl::SortItems的原型是: BOOL SortItems( PFNLVCOMPARE pfn ...
Qt自定义点击表头排序，使支持恢复默认顺序
0.前言之前总结了 QTableView 实现排序 ,但是这里还有个问题,就是 Qt 默认的排序状态只有升序和降序,没法通过点击表头恢复到默认的顺序,他这个 SortOrder 宏也只有升序降序两个 ...
php 点击表头排序,TP5+ajax实现点击表格表头切换排序，带分页
TP5+ajax实现点击表格表头切换排序,带分页 2018-08-15 14:59:06ThinkPHP php接收页码请求的地址 /** * ajax 无刷新分页 * param $page int ...
点击表头排序的几种方法动态表格
我记得老早老早大家就开始在经典讨论表格排序的问题了,过了这么多年,这个问题的解决方案层出不穷,见仁见智. 用script,htc,xml+xsl等等怎么着都能实现,只是效率不同罢了. 今天正好学习.n ...
php liger 表格排序,LigerUI之grid表格点击表头标题排序实现
LigerUI之grid表格点击表头标题排序实现: 通过ajax方式加载数据之后,点击表头排序两种方式实现. 第一种: grid.set({ dataAction: 'local', url: '', ...
我在达内学安卓-基于ArrayAdapter创建单一对象列表方式创建联系人列表！
学习安卓怎么学?从界面开始.到各种控件到四大金刚,再到各种不同的应用方法和应用方式,却是很容易把自己学晕,怎么办呢? 先理清思路,然后从控件一个一个的开始学起,自从来到达内学习,由于之前的理解都是面对 ...
Java面对对象概念，什么是面向对象
我们都知道Java是一门面向对象的语言.什么是面向对象,它有什么特性呢,今天我们就来说一下这个"面向对象"到底是什么意思. 面向对象简称 OO(Object Oriented),2 ...
易语言java类_易语言面对对象编程
易语言面对对象编程---类的创建与使用面对对象编程,可以说是当前最流行的编程方式,当前流行的面对对象的编程语言很多,如:C++.JAVA等等.易语言3．8版推出后,同样紧跟编程语言发展的方向,也开始 ...

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

用面对对象的方式点击表头排序相关推荐

最新文章

热门文章