當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS 无刷新排序

發布時間：2024/4/15 javascript 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS 无刷新排序小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JS?無刷新排序?比較實用的腳本。

<html>
<head>
<script>
function?order(){
var?it=event.srcElement;
var?table=it;
var?i,j,k;
var?t1,t2;
if(it.tagName=="TH"){
????i=it.cellIndex;
????it.title=it.title=="asc"?"desc":"asc";
????while(table.tagName!="TABLE")table=table.parentElement;
????if(table.rows.length<3)return?true;
????for(j=1;j<table.rows.length;j++){
????????for(k=j+1;k<table.rows.length;k++){
????????????if(it.title=="asc"?parseFloat(table.rows[k].cells[i].innerText)<parseFloat(table.rows[j].cells[i].innerText):parseFloat(table.rows[k].cells[i].innerText)>parseFloat(table.rows[j].cells[i].innerText))
????????????table.rows[j].swapNode(table.rows[k]);
????????}
????}
}
}
</script>
</head>
<body>

<table?border="1">
<thead?onclick="order()">
<th>Item?1</th><th>Item?2</th><th>Item?3</th><th>Item?4</th>
</thead>
<tr><td>12.3</td><td>423</td><td>86.83</td><td>1.213</td></tr>
<tr><td>2</td><td>434</td><td>5.334</td><td>.234</td></tr>
<tr><td>33</td><td>43</td><td>5.223</td><td>8.73</td></tr>
<tr><td>21.3</td><td>234</td><td>52.34</td><td>.666</td></tr>
<tr><td>33.4</td><td>59</td><td>67.2</td><td>.426</td></tr>
</table>

</body>
</html>

轉載于:https://www.cnblogs.com/coolylh/archive/2005/12/26/304640.html

總結

以上是生活随笔為你收集整理的JS 无刷新排序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。