前端笔试题笔记：在HTML中实现table表头点击升序-自学php网

前端笔试题笔记：在HTML中实现table表头点击升序

来源：自学PHP网时间：2015-04-14 14:51 作者：阅读:次

[导读] 题目：如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。姓名力量敏捷智力德鲁伊...

题目：如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。

姓名	力量	敏捷	智力
德鲁伊	17	24	13
月之骑士	15	22	16
众神之王	19	15	20
流浪剑客	23	15	14

基本思路：

完整代码：

`姓名`	`力量`	`敏捷`	`智力`
`德鲁伊`	`17`	`24`	`13`
`月之骑士`	`15`	`22`	`16`
`众神之王`	`19`	`15`	`20`
`流浪剑客`	`23`	`15`	`14`

<script type="text/javascript"> var tag=1; function sortNumberAS(a, b) { return a - b } function sortNumberDesc(a, b) { return b-a } function SortTable(obj){ var td0s=document.getElementsByName("td0"); var td1s=document.getElementsByName("td1"); var td2s=document.getElementsByName("td2"); var td3s=document.getElementsByName("td3"); var tdArray0=[]; var tdArray1=[]; var tdArray2=[]; var tdArray3=[]; for(var i=0;ihtml="tdArray3[j];" code="" columnarray="[];" i="0;i<td1s.length;i++){" j="0;j<orginArray.length;j++){" obj.classname="desc" orginarray="[];" tds="document.getElementsByName("td"+obj.id.substr(2,1));" var="">

html学习 - 元素隐藏/显示和input隐藏 - html/css语言

处理html解析问题 - html/css语言栏目：html.css - 自学

子栏目

前端笔试题笔记：在HTML中实现table表头点击升序

题目：如下图，请实现表格信息的排序功能，当点击表头的属性区域，将表格信息进行排序切换功能，即第一次点击为降序排序，再一次点击进行升序排序。

基本思路：

完整代码：

最新评论

添加评论

更多文章推荐

添加评论