php使用js对表格进行排序，phpjs表格排序
- WBOY原創
- 2016-06-13 08:54:341574瀏覽
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