单击表格标题进行排序

更新时间:2018-02-10 13:24:10 附件大小:90.15MB 语言种类:简体中文 所属分类:值得一看 运行平台:Window 投稿作者:小柒生活网 围  观:2228次 获得点赞:0次 评论回复:0次
简要介绍
PHP代码,注意,table里面有thead和tbody两个标签
<table align="center" border="1" bordercolor="#CCC" style=" border-collapse:collapse; text-align:center;" class="tabletd">
   <thead>
    <tr>
    
    	<td>学号</td>
        <td>姓名</td>
        <td>考试类别</td>
    	<td id="3" onclick="paixul(this.id)">语文</td>
        <td id="4" onclick="paixul(this.id)">数学</td>
        <td id="5" onclick="paixul(this.id)">英语</td>
        <td id="6" onclick="paixul(this.id)">历史</td>
        <td id="7" onclick="paixul(this.id)">政治</td>
        <td id="8" onclick="paixul(this.id)">物理</td>
        <td id="9" onclick="paixul(this.id)">化学</td>
        <td id="10" onclick="paixul(this.id)">地理</td>
        <td id="11" onclick="paixul(this.id)">生物</td>
        <td id="12" onclick="paixul(this.id)">其他</td>
        <td id="13" onclick="paixul(this.id)">总分</td>
        <td>其他说明</td>
        
    </tr>
    </thead>
    <tbody>
	<?php
	
		while($editRow = mysql_fetch_assoc($editResult))
		{							
$num = $editRow['cat']-1;						
echo "<tr>";
echo "<td style=' padding:3px 10px;'>".$editRow['user']."</td>";
$userSql = "select * from {$db_prefix}score where user = ".$editRow['user'];
$userResult = mysql_query($userSql);
while($userRow = mysql_fetch_assoc($userResult))
{
	if($userRow['username'] !="")
	{
	echo "<td style=' padding:3px 10px;'>".$userRow['username']."</td>";
	}
}
echo "<td style=' padding:3px 10px;'>".$arr[$editRow['cat']-1][0]."</td>";
echo "<td style=' padding:3px 10px;'>".$editRow['yuwen']."</td>";
echo "<td style=' padding:3px 10px;'>".$editRow['shuxue']."</td>";
echo "<td style=' padding:3px 10px;'>".$editRow['yingyu']."</td>";
echo "<td style=' padding:3px 10px;'>".$editRow['lishi']."</td>";
echo "<td style=' padding:3px 10px;'>".$editRow['zhengzhi']."</td>";
echo "<td style=' padding:3px 10px;'>".$editRow['wuli']."</td>";
echo "<td style=' padding:3px 10px;'>".$editRow['huaxue']."</td>";
echo "<td style=' padding:3px 10px;'>".$editRow['dili']."</td>";
echo "<td style=' padding:3px 10px;'>".$editRow['shengwu']."</td>";
echo "<td style=' padding:3px 10px;'>".$editRow['qita']."</td>";
echo "<td style=' padding:3px 10px;'>".($editRow['yuwen']+$editRow['shuxue']+$editRow['yingyu']
+$editRow['lishi']+$editRow['zhengzhi']+$editRow['wuli']+$editRow['huaxue']+$editRow['dili']
+$editRow['shengwu']+$editRow['qita'])."</td>";
echo "<td style=' padding:3px 10px;'>".$editRow['qtsm']."</td>";
						
echo "</tr>";
					
		}
	 ?>
 </tbody>
</table>

JS代码

var tbody=document.getElementsByTagName('tbody')[0];    //获取文档下的第一个tbdoy
var tr=tbody.getElementsByTagName('tr');     //获取tbody下的tr(数组)
var arr=[];
var isAsc=true;   //判断当前排序是否是正序
function paixul(ming){
	var score=document.getElementById(ming);/*获取每个ID*/
	var numint = parseInt(ming)/*获取id的整数值*/
	
if(!isAsc){   //如果是反序,则进行一下操作 
for(var i=0;i<tr.length;i++){
arr.push(tr[i]);   //把tr数组复制到arr数组
}
arr.sort(function(tr1, tr2){    //数组排序arr.sort()
var value1 = parseFloat(tr1.getElementsByTagName('td')[numint].innerHTML); 
var value2 = parseFloat(tr2.getElementsByTagName('td')[numint].innerHTML); 

return value1 - value2;   //localeCompare() 方法提供的是比较字符串的方法,如果value2>value1,
则返回1;如果value2<value1,则返回-1;相等则0
});
Oinsert();   //进行文档添加操作
isAsc=true;  //点击之后反转一下顺序
} else {   //如果是正序,则进行一下操作
for(var i=0;i<tr.length;i++){
arr.push(tr[i]);
}
arr.sort(function(tr1, tr2){ 
var value1 = parseFloat(tr1.getElementsByTagName('td')[numint].innerHTML); 
var value2 = parseFloat(tr2.getElementsByTagName('td')[numint].innerHTML); 
return value2 - value1; 
});
Oinsert();
isAsc=false;
}
}

function Oinsert(){     //向文档添加已排好序的节点
var fragment=document.createDocumentFragment();   //当你想提取文档的一部分,改变,增加,
或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法
for(var j=0;j<arr.length;j++){
fragment.appendChild(arr[j]);   //把数组中的元素添加到节点的子节点列表的末尾
}
tbody.appendChild(fragment);   //把fragment添加到tbody
}


以上就是单击表格标题进行排序过程


同类推荐
我要评论 0条评论,0条回复
请先登录后再评论
匿名用户
    热门评论
    最新评论
查看更多评论