javascript 實(shí)現(xiàn)簡(jiǎn)單的table排序在這個(gè)列子中,，練習(xí)了table的操作，主要有：tBodies,、rows,、cells，還有有關(guān)數(shù)組的排序方法：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 = [];//用來(lái)存放每一個(gè)tr var isAsc = true;//用來(lái)判斷升序,，還是降序 oBtn.onclick = function () { for (var i = 0; i < oTbody.rows.length; i++ ) { arr[i] = oTbody.rows[i];//這里是把每一個(gè)tr存放到一個(gè)數(shù)組,，而不是排序的依據(jù)（這里是cells[0].innerHTML） } //數(shù)組根據(jù)cells[0].innerHTML來(lái)排序 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> 下面啰嗦一些相關(guān)的知識(shí)點(diǎn)： 我們都知道,，平時(shí)操作一般的DOM可以getElementsByTagName,、getElementById云云來(lái)獲取相關(guān)節(jié)點(diǎn) 在table中當(dāng)然這種方法也可以實(shí)現(xiàn) 顯然，這樣操作會(huì)很麻煩 所以,，對(duì)于table我們可以用另一套方法,、屬性來(lái)操作： 在這之前，先說(shuō)一些有關(guān)table的東東： 平時(shí)寫table相信很多人會(huì)直接這么寫： <table id="tableTest" width="400" border="1"> <tr> <td>3</td> <td>ccc</td> <td> </td> <td> </td> </tr> </table> 如果,，你firebug查看一下代碼,，你會(huì)發(fā)現(xiàn)會(huì)多出一個(gè)tbody來(lái),，明明源代碼是沒有的 這是為毛？,！ 其實(shí),，table的真正結(jié)構(gòu)是:table中也包括：thead、tbody,、tfoot,，其中tbody是可以多個(gè)的 回到主題上來(lái): javascript中有關(guān)table元素的屬性、方法：
有關(guān)tbody的屬性,、方法：
有關(guān)tr的屬性、方法：
OK,，就說(shuō)這些……………… |
|
|
來(lái)自： quasiceo > 《計(jì)算機(jī)》
