<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#div2 {
width: 100px;
height: 100px;
background: yellow;
position: absolute;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn1');
var oTab = document.getElementById('tab1');
var bAsc = true; //是否升序排序
oBtn.onclick = function() {
var arr = [];
//1.转成数组
for(var i = 0; i < oTab.tBodies[0].rows.length; i++) {
arr[i] = oTab.tBodies[0].rows[i];
};
//2.数组排序
arr.sort(function(tr1, tr2) {
if(bAsc) {
return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);
} else {
return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML);
}
});
//3.重新插入
for(var j = 0; j < arr.length; j++) {
oTab.tBodies[0].appendChild(arr[j]);
}
//真为假,假为真
bAsc=!bAsc;
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="400">
<thead>
<td>ID</td>
<td>姓名</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>3</td>
<td>blue</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Leo</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>默默</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>aaa</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>bbb</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>ccc</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>JavaScript表格排序
猜你喜欢
转载自blog.csdn.net/qq_37995109/article/details/85251547
今日推荐
周排行