當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

頁面表格的排序

頁面表格的排序

更新時間:2023-06-21 文章作者:未知 信息來源:網絡 閱讀次數:

編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。

【實例名稱】

網頁表格的排序

【實例描述】

為了可以清晰地顯示表格的信息,用戶可以對表格進行排序。下面以表格的升序為例,介紹如何實現排序功能。

【實例代碼】

<html> <head>     <title>tree-本站(www.xue51.com)</title>     <meta name="designer" content="csdn design team - meizz" /> </head> <style> body{ FONT-SIZE: 9pt; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; } input { FONT-SIZE: 9pt; height: 15pt; width:50px; cursor: default; } table{ font-size: 9pt; word-break:break-all; cursor: default; BORDER: black 1px solid; background-color:#eeeecc; border-collapse:collapse; border-Color:#999999; align:center; } </style> <script language=javascript> function show() {     var temp=new Array()     var obj=document.getElementById("table1").childNodes[0] //獲取當前頁的表格     var objs=obj.childNodes                 //獲取表格的第一級子元素     //遍歷表格子元素的     for(var i=0;i<objs.length;i++)     {           //取表格的第三個元素        temp[i]=new Array(objs[i].childNodes[2].innerText,objs[i])     }     temp.sort(function(a,b){return a[0]-b[0]})       //進行排序-自定義排序方法sort     for(var i=0;i<temp.length;i++)       obj.appendChild(temp[i][1])            //將排序結果重新添加到表格中 } </script> <body> <form name="myForm" method="post" action="/addcontent.jsp"> <table width="60%" border="0" cellspacing="0" cellpadding="0" align="center" id="table1">   <tr>     <td width="24%" align="center"> <input type="checkbox" name="id" ></td>     <td width="56%">用戶體驗的新技術</td>     <td width="20%">3</td>   </tr>   <tr>     <td width="24%" align="center"> <input type="checkbox" name="id" ></td>     <td width="56%">綜合留言板</td>     <td width="20%">2</td>   </tr>   <tr>     <td width="24%" align="center"> <input type="checkbox" name="id" ></td>     <td width="56%">歷史資料查詢</td>     <td width="20%">1</td>   </tr> </table> <input name="button1" type="button" value="排序" onclick=show()> </form> </body> </html>

【運行效果】

                                                               排序前

運行效果

                                                          排序后

運行效果

【難點剖析】

本例的重點是獲取排序的值,以及如何進行排序。獲取排序的值使用了DoM對象中的“childNodes”屬性,如“childNodes[2].innerText”就是用來獲取表格第二列的數據,然后使用“sort”方法實現排序。

【源碼下載】

如果你不愿復制代碼及提高代碼準確性,你可以點擊:表格的寬度固定后內容自動換行 進行本實例源碼下載 


使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

網站地圖xml | 網站地圖html
亚洲嫩草影院久久精品