<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格搜索</title>
</head>
<script type="text/javascript">
window.onload = function () {
var oTab = document.getElementById('tab2');
var oBtn = document.getElementById('btn1');
oBtn.onclick = function () {
var arr = [];
for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
arr[i]=oTab.tBodies[0].rows[i];
}
arr.sort(function (tr1, tr2) {
var n1 = parseInt(tr1.cells[0].innerHTML);
var n2 = parseInt(tr2.cells[0].innerHTML);
return n1-n2;
});
for (var i = 0; i < arr.length; i++) {
oTab.tBodies[0].appendChild(arr[i]);
}
};
}
</script>
<body>
<input id="btn1" type="button" value="排序" />
<table id="tab2" width="500" border="1">
<thead>
<td>序号</td>
<td>姓名</td>
<td>学号</td>
<td>年龄</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>丁冯超</td>
<td>131412</td>
<td>21</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>钟辉</td>
<td>131212</td>
<td>20</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>申振</td>
<td>131415</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>丁元超</td>
<td>131315</td>
<td>21</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>于加良</td>
<td>111415</td>
<td>20</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
程序源代码,li中的元素跟数组中的元素灵活应用
其中运用的原理代码用如下的js代码进行解释
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索的原理</title>
<style type="text/css">
#ul1{background: green;}
#ul2{background: yellow;}
</style>
<script type="text/javascript">
window.onload = function () {
var Oul1 = document.getElementById('ul1');
var Oul2 = document.getElementById('ul2');
var Obtn = document.getElementById('btn1');
Obtn.onclick = function () {
var oli = Oul1.children[0];
//Oul1.removeChild(oli);所以这一句可以删除
//Oul2.appendChild(oli);//先把原来数组中的元素删除然后将它赋值给新的父级
Oul1.appendChild(oli);
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<input id="btn1" type="button" value="移动" />
<ul id="ul2">
</ul>
</body>
</html>