javascript 实现简单的table排序在这个列子中,练习了table的操作,主要有:tBodies、rows、cells,还有有关数组的排序方法:sort 先上代码: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>table排序</title> </head> <body> <table id="tableTest" width="400" border="1"> <tbody> <tr> <td>2</td> <td>bbb</td> <td> </td> <td> </td> </tr> <tr> <td>5</td> <td>eee</td> <td> </td> <td> </td> </tr> <tr> <td>3</td> <td>ccc</td> <td> </td> <td> </td> </tr> <tr> <td>4</td> <td>ddd</td> <td> </td> <td> </td> </tr> <tr> <td>1</td> <td>aaa</td> <td> </td> <td> </td> </tr> </tbody> </table> <input type="button" id="sort" value="表格排序" /> <script> window.onload = function () { var oTable = document.getElementById('tableTest'); var oTbody = oTable.tBodies[0]; var oBtn = document.getElementById('sort'); var arr = [];//用来存放每一个tr var isAsc = true;//用来判断升序,还是降序 oBtn.onclick = function () { for (var i = 0; i < oTbody.rows.length; i++ ) { arr[i] = oTbody.rows[i];//这里是把每一个tr存放到一个数组,而不是排序的依据(这里是cells[0].innerHTML) } //数组根据cells[0].innerHTML来排序 arr.sort(function (td1, td2){ if(isAsc) { return parseInt(td1.cells[0].innerHTML) - parseInt(td2.cells[0].innerHTML); } else { return parseInt(td2.cells[0].innerHTML) - parseInt(td1.cells[0].innerHTML); } }); //把排序后的tr 重新插入tbody for(var j =0; j < arr.length; j++ ) { oTbody.appendChild(arr[j]); } //判断升序,降序 isAsc = !isAsc; } } </script> </body> </html> 下面啰嗦一些相关的知识点: 我们都知道,平时操作一般的DOM可以getElementsByTagName、getElementById云云来获取相关节点 在table中当然这种方法也可以实现 显然,这样操作会很麻烦 所以,对于table我们可以用另一套方法、属性来操作: 在这之前,先说一些有关table的东东: 平时写table相信很多人会直接这么写: <table id="tableTest" width="400" border="1"> <tr> <td>3</td> <td>ccc</td> <td> </td> <td> </td> </tr> </table> 如果,你firebug查看一下代码,你会发现会多出一个tbody来,明明源代码是没有的 这是为毛?! 其实,table的真正结构是:table中也包括:thead、tbody、tfoot,其中tbody是可以多个的 回到主题上来: javascript中有关table元素的属性、方法:
有关tbody的属性、方法:
有关tr的属性、方法:
OK,就说这些……………… |
|