php使用js对表格进行排序，phpjs表格排序
- WBOYOriginal
- 2016-06-13 08:54:341574Durchsuche
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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：如何POST一个JSON格式的数据给Restful服务，jsonrestfulNächster Artikel：php对文本文件进行分页功能简单实现，