First, knowledge
AppendChild (): First delete, in sort
Sort (): array sort
parseint (): string = = = Integer (number)
!!! -HTML
<input id= "btn1" type= "button" value= "Sort"/>
<table id= "Tab1" border= "1" width= ">"
<thead>
<td>ID</td>
<td> name </td>
<td> Age </td>
<td> Operations </td>
</thead>
<tbody>
<tr>
<td>2</td>
<td> Zhang San </td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td> Wangsi </td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td> Zhang Wei </td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td> John Doe </td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td> Harry </td>
<td>25</td>
<td></td>
</tr>
</tbody>
</table>
!!! Js
Window.onload=function ()
{
var Otab=document.getelementbyid (' Tab1 ');
var Obtn=document.getelementbyid (' btn1 ');
Obtn.onclick=function ()
{
var arr=[]; First, create an empty array that contains the values you want to sort
for (Var i=0;i<otab.tbodies[0].rows.length;i++)
{
Arr[i]=otab.tbodies[0].rows[i]; The array gets the data inside the table.
}
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]);
}
};
};
javascript-table Sorting