<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Document</title>
<script type= "Text/javascript" >
Window.onload = function () {
var input = document.queryselectorall (' input ');
var table = document.queryselector (' table ');
var rows = table.tbodies[0].rows;
var arrrows = [];
/* Because only the array is sorted, so the TR is put into the arrays */
for (var i = 0; i < rows.length; i++) {
Arrrows.push (Rows[i]);
}
Arrrows.sort (function (b) {
return b.cells[1].innerhtml-a.cells[1].innerhtml;
Sort based on the contents of the 1th cell in a TR
// });
Arrrows.foreach (function (TR) {
In accordance with the order of automatic arranging, re-put the TR into tbody
Table.tbodies[0].appendchild (TR);
// });
Console.log (arrrows);
Input[0].onclick = function () {
Arrrows.sort (function (b) {
return b.cells[1].innerhtml-a.cells[1].innerhtml;
Sort based on the contents of the 1th cell in a TR
});
Arrrows.foreach (function (TR) {
In accordance with the order of automatic arranging, re-put the TR into tbody
Table.tbodies[0].appendchild (TR);
});
}
Input[1].onclick = function () {
Arrrows.sort (function (b) {
return a.cells[1].innerhtml-b.cells[1].innerhtml;
Sort based on the contents of the 1th cell in a TR
});
Arrrows.foreach (function (TR) {
In accordance with the order of automatic arranging, re-put the TR into tbody
Table.tbodies[0].appendchild (TR);
});
}
};
</script>
<body>
<table border= "1" width= "align=" Center >
<thead>
<tr>
<th> Fruit </th>
<th> Unit Price (￥) </th>
</tr>
</thead>
<tbody>
<tr>
<th> Apple </th>
<th>54.5</th>
</tr>
<tr>
<th> oranges </th>
<th>24.5</th>
</tr>
<tr>
<th> Watermelon </th>
<th>33.8</th>
</tr>
<tr>
<th> Banana </th>
<th>13.8</th>
</tr>
</tbody>
<tfoot>
<tr>
<TD colspan= "2" style= "Text-align:center;" >
<input type= "button" value= "Price from High to Low" >
<input type= "button" value= "Price from low to High" >
</td>
</tr>
</tfoot>
</table>
</body>
Every day a JS small demo form sort. Key points of knowledge: form manipulation in the DOM, node manipulation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
