<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="move2.js"></script>
</head>
<body>
<div style=" 500px; margin:20px auto;">
<input type="text" id="tex">
<input type="button" id="btn" value="添加"></div>
<table id="tab" border="1" width="500px" style="margin:0 auto;">
<thead>
<tr>
<td>姓名</td>
<td>学号</td>
<td>时间</td>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>aa</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>bb</td>
<td></td>
</tr>
<tr>
<td>33</td>
<td>cc</td>
<td></td>
</tr>
<tr>
<td>44</td>
<td>dd</td>
<td></td>
</tr>
<tr>
<td>55</td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>66</td>
<td>3</td>
<td></td>
</tr>
</tbody>
</table>
<!-- <script>
悬停变色
window.onload=function(){
var oTab=document.getElementById('tab');
var oTr=oTab.tBodies[0].rows;
var i=0;
var oColor="";
for(i=0;i<oTr.length;i++){
if (i%2) {
oTr[i].style.background='#eee';
}
}
for(i=0;i<oTr.length;i++){
oTr[i].onmouseover=function(){
oColor=this.style.background;
this.style.background='green';
}
oTr[i].onmouseout=function(){
this.style.background=oColor;
}
}
}
</script> -->
<!-- <script>
动态添加
window.onload=function(){
var oTab=document.getElementById('tab');
var oText=document.getElementById('tex');
var oBtn=document.getElementById('btn');
var i=0;
oBtn.onclick=function(){
oTr=document.createElement('tr');
oTd="";
oTd=document.createElement('td');
oTd.innerHTML=oTab.tBodies[0].rows.length+1;
oTr.appendChild(oTd);
oTd=document.createElement('td');
oTd.innerHTML=oText.value;
oTr.appendChild(oTd);
oTd=document.createElement('td');
oTd.innerHTML='<a href="javascript:;">删除</a>'
var aA=oTd.getElementsByTagName('a')[0];
aA.onclick=function(){
oTab.tBodies[0].removeChild(this.parentNode.parentNode);
}
oTr.appendChild(oTd);
oTab.tBodies[0].appendChild(oTr);
}
}
</script> -->
<script>
window.onload=function(){
var oTab=document.getElementById('tab');
var oText=document.getElementById('tex');
var oBtn=document.getElementById('btn');
var i=0;
var arr=[];
oBtn.onclick=function(){
/* 首先创建数组 因为sort是数组的方法 */
for(i=0;i<oTab.tBodies[0].rows.length;i++){
arr[i]=oTab.tBodies[0].rows[i];
};
/*数组排序*/
arr.sort(function(tr1,tr2){
return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);
});
/*重新添加*/
for(i=0;i<arr.length;i++){
oTab.tBodies[0].appendChild(arr[i]);
}
}
}
</script>
</body>
</html>