php使用js对表格进行排序，phpjs表格排序
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html" charset="utf-8">
<title><span>sort</span> table</title>
<style>
*<span>{
margin</span>:<span>0px;
padding</span>:<span>0px;
}
body{
background</span>:<span>#</span><span>ccc;</span>
<span> }
table{
width</span>:<span>350px;
margin</span>:0<span> auto;
background</span>-color:<span>#</span><span>eee;</span>
<span> }
table th{
cursor</span>:<span>hand;
padding</span>:5px 0<span>;
background</span>-color:<span>#</span><span>999;</span>
<span> }
table td{
background</span>-color:<span>#</span><span>fff;</span>
font-size:<span>16px;
font</span>-weight:<span>normal;
text</span>-align:<span>center;
line</span>-height:<span>30px;
}
</span></style>
<script language="javascript">
<span>function</span><span> sortCells(type){
</span><span>var</span> tbs=document.getElementsByTagName("table")[0<span>];
</span><span>var</span> arr=<span>[];
</span><span>var</span> arr2=<span>[];
</span><span>for</span>(<span>var</span> i=1;i<tbs.rows.length;i++<span>){
</span><span>var</span> text=tbs.rows[i].cells[type].<span>innerText;
arr</span>.<span>push(text);
arr2[text]</span>=<span>i;
}
</span><span>if</span>(type==0<span>){
arr</span>.<span>sort</span>(<span>function</span>(a,b){<span>return</span> a-<span>b});
}</span><span>else</span><span>{
arr</span>.<span>sort</span><span>();
}
</span><span>var</span> temp=""<span>;
</span><span>for</span>(<span>var</span> j=1;j<tbs.rows.length;j++<span>){
temp</span>=tbs.rows[j].cells[0].<span>innerText;
tbs</span>.rows[j].cells[0].innerText=tbs.rows[arr2[arr[j-1]]].cells[0].<span>innerText;
tbs</span>.rows[arr2[arr[j-1]]].cells[0].innerText=<span>temp;
temp</span>=tbs.rows[j].cells[1].<span>innerText;
tbs</span>.rows[j].cells[1].innerText=tbs.rows[arr2[arr[j-1]]].cells[1].<span>innerText;
tbs</span>.rows[arr2[arr[j-1]]].cells[1].innerText=<span>temp;
temp</span>=tbs.rows[j].cells[2].<span>innerText;
tbs</span>.rows[j].cells[2].innerText=tbs.rows[arr2[arr[j-1]]].cells[2].<span>innerText;
tbs</span>.rows[arr2[arr[j-1]]].cells[2].innerText=<span>temp;
</span><span>//</span><span> console.log(arr2);</span>
<span>for</span>(<span>var</span> i=1;i<tbs.rows.length;i++<span>){
</span><span>var</span> text=tbs.rows[i].cells[type].<span>innerText;
arr2[text]</span>=<span>i;
}
}
}
</span></script>
</head>
<body>
<center><span>sort</span> table</center>
<table border="0">
<tr>
<th onclick="sortCells(0);">序号</th>
<th onclick="sortCells(1);">姓名</th>
<th onclick="sortCells(2);">日期</th>
</tr>
<tr>
<td>2</td>
<td>BB</td>
<td>2015-09-12</td>
</tr>
<tr>
<td>3</td>
<td>CC</td>
<td>2015-07-12</td>
</tr>
<tr>
<td>1</td>
<td>AA</td>
<td>2015-09-11</td>
</tr>
<tr>
<td>4</td>
<td>DD</td>
<td>2015-06-12</td>
</tr>
</table>
</body>
</html>
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
1 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌
熱工具
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
Atom編輯器mac版下載
最受歡迎的的開源編輯器
WebStorm Mac版
好用的JavaScript開發工具
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
