10-16盒子的移动与停止、表格的排序

一、表格中内容的排序：

<script>
window.onload=function(){
var ohead = document.getElementById('tb').tHead;//获取表头
var tBd= document.getElementById('tb').tBodies[0];//获取表格的body
var tRows= tBd.rows;//获取body的行数
var tYw=ohead.rows[0].cells[2];//获取表头的第n个元素
var tMath=ohead.rows[0].cells[3];
var tWy=ohead.rows[0].cells[4];
function sortTb(n){//将数组对象的内容进行排序
var arr=[];//创建空数组存储rows的内容
for(var i=0;i<tRows.length;i++){
arr[i]=tRows[i];//将body中的每一行都存储到arr里
}
arr.sort(function(n1,n2){//将arr每一行里的第n个单元格里的内容转为int进行从小到大排序
var a=n1.cells[n].innerHTML;
var b=n2.cells[n].innerHTML;
return parseInt(a)-parseInt(b);
});
for(var i=0;i<arr.length;i++){
tBd.appendChild(arr[i]);//将排序好的arr数组添加到body下面
}
}
tYw.onclick=function(){
sortTb(2);//第三列调用函数
}
tMath.onclick=function(){
sortTb(3);//第四列调用函数
}
tWy.onclick=function(){
sortTb(4);//第五列调用函数
}
for(var i=0;i<tRows.length;i++){//计算成绩表中的总分
var a=0;
// var arr1=[];
for(var j=2;j<5;j++){
a += parseInt(tRows[i].cells[j].innerHTML);//将每一行中的第三四五列的内容相加，用a存储
}
tRows[i].cells[5].innerHTML=a;//每一行中的总分单元格都被a赋值
// arr1=tRows[i].cells[5];
}
var btn = document.getElementById('btn');
function search(){//查询某个名字的同学的成绩，隐藏其他
var txt =document.getElementById('txt').value;//获取输入框内的名字
for(var i=0;i<tRows.length;i++){//遍历body中的每一行
tRows[i].style.display="none";//先将所有行隐藏
if(tRows[i].cells[1].innerHTML==txt){//判断body中有没有这名字
tRows[i].style.display='table-row';//如果名字相等，则将这一行显示
}
}
}
btn.onclick=function(){
search();
}


}
</script>

二、控制盒子的移动与停止：

<script>
window.onload=function(){
var div = document.getElementById("box");
var btn = document.getElementById('btn');
var timer=null;
function move(){
if(div.offsetLeft>=300){//让盒子停止运动
clearInterval(timer);
}else{//防止停止后这句还会执行使盒子还会运动
div.style.left=div.offsetLeft+10+'px';
}
}
btn.onclick=function(){
clearInterval(timer);//使用定时器前先清空定时器，防止加速运动bug
timer =setInterval(move,30);
}


}
</script>