这是打开页面的默认排序,但是我想要的是,一打开页面不通过点击就默认按里面的数值大小来排序
现在这段代码是需要点击从能实现排序的,请问一下如何改成自动从大到小排序
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>HelloWorld</title>
<style type="text/css">
table {
margin: 0 auto;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
</style>
<script src="jquery.min.js"></script>
<script type="text/javascript">
window.onload = function ()
{
var table = document.getElementById ('table');
var tbody = table.tBodies[0];
var rows = tbody.rows;
var cells = rows[0].cells;
for ( var j = 0; j < cells.length; j++)
{
cells[j].onclick = function ()
{
var asc = this.asc = !!this.asc ? -this.asc : -1;
var array = [];
array.index = this.cellIndex;
for ( var i = 1; i < rows.length; i++)
{
array.push (rows[i]);
}
array.sort (function (a, b)
{
var n1 = a.cells[array.index].firstChild.nodeValue;
var n2 = b.cells[array.index].firstChild.nodeValue;
if (n1 > n2)
{
return asc;
}
else if (n1 < n2)
{
return -asc;
}
else
{
return 0;
}
});
for ( var i = 0; i < array.length; i++)
{
tbody.appendChild (array[i]);
}
}
}
}
</script>
</head>
<body style="text-align: center;">
<table id="table">
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td>98</td>
<td>李勇</td>
</tr>
<tr>
<td>94</td>
<td>王博</td>
</tr>
<tr>
<td>705</td>
<td>刘海</td>
</tr>
<tr>
<td>1025</td>
<td>陈锋</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HelloWorld</title>
<style type="text/css">
table {
margin: 0 auto;
border: 1px solid black;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
</style>
<script src="jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var table = document.getElementById('table');
var rows = [];
for (var i = 1; i < table.rows.length; i++) rows.push(table.rows[i]);
function sortRow() {
var cellIndex = this.cellIndex, isInt = /^\d+$/.test(rows[0].cells[cellIndex].innerHTML), asc = this.asc;
rows.sort(function (r1,r2) {
if (isInt) return parseInt((asc ? r1 : r2).cells[cellIndex].innerHTML) - parseInt((asc ? r2 : r1).cells[cellIndex].innerHTML);
return (asc ? r1 : r2).cells[cellIndex].innerHTML.localeCompare((asc ? r2 : r1).cells[cellIndex].innerHTML)
});
for (var i = 0; i < rows.length; i++) table.appendChild(rows[i]);
this.asc = !asc;
}
for (var i = 0; i < table.rows[0].cells.length; i++) table.rows[0].cells[i].onclick = sortRow;
}
</script>
</head>
<body style="text-align: center;">
<table id="table">
<tr>
<td>编号</td>
<td>姓名</td>
</tr>
<tr>
<td>98</td>
<td>李勇</td>
</tr>
<tr>
<td>94</td>
<td>王博</td>
</tr>
<tr>
<td>705</td>
<td>刘海</td>
</tr>
<tr>
<td>1025</td>
<td>陈锋</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
你已经实现了点击排序就已经完成了啊
点击是一个事件,页面加载也是一个事件
你再body标签上加个onload就好了
字符串不能进行大小的比较的,先将字符串进行转义再进行比较
<!DOCTYPE HTML>
编号 | 姓名 |
98 | 李勇 |
94 | 王博 |
705 | 刘海 |
1025 | 陈锋 |
csdn评论转义代码,等下
<script>
function sort(){ sort 代码。。。}
</script>
<body onload="sort()">
....
</body>
用sort()函数实现
window.onload = function () { var table = document.getElementById ('table'); var tbody = table.tBodies[0]; var rows = tbody.rows; var row, rowNext, num, numNext; for(var i=1,l=rows.length-1;i<l;i++){ row=rows[i]; num=row.children[0].innerText-0; for(var ii=i+1,ll=rows.length;ii<ll;ii++){ rowNext=rows[ii]; numNext=rowNext.children[0].innerText-0; if(num<numNext){//交换 row=rowNext; } } tbody.insertBefore(row,rows[i]); } }