Javascript implements simple table sorting and table operation exercises_javascript skills

;









;


🎜>
<script> <br>window.onload = function () { <br>var oTable = document. getElementById('tableTest'); <br>var oTbody = oTable.tBodies[0]; <br>var oBtn = document.getElementById('sort'); <br>var arr = [];//used to store each A tr <br>var isAsc = true; // Used to determine ascending or descending order <br>oBtn.onclick = function () { <br>for (var i = 0; i < oTbody.rows.length; i ) { <BR>arr[i] = oTbody.rows[i];//Here, each tr is stored in an array, rather than the basis for sorting (here is cells[0].innerHTML) <BR>} <BR> //The array is sorted according to cells[0].innerHTML <BR>arr.sort(function (td1, td2){ <BR>if(isAsc) { <BR>return parseInt(td1.cells[0].innerHTML ) - parseInt(td2.cells[0].innerHTML); <BR>} else { <BR>return parseInt(td2.cells[0].innerHTML) - parseInt(td1.cells[0].innerHTML); <BR>} <BR>}); <BR>//Reinsert the sorted tr into tbody <BR>for(var j =0; j < arr.length; j ) { <BR>oTbody.appendChild(arr[ j]); <BR>} <BR>//Judge ascending order, descending order <BR>isAsc = !isAsc; <BR>} <BR>} <BR></script>




Here are some relevant knowledge points:
We all know that when operating ordinary DOM, we can get the relevant nodes through getElementsByTagName, getElementById etc.
In the table Of course, this method can also be implemented
Obviously, this operation will be very troublesome
Therefore, we can use another set of methods and attributes to operate the table:
Before that, let’s talk about something about the table. Dongdong:
I believe many people will write directly like this when writing tables:



Copy the code


The code is as follows:

2	bbb
eee
3	ccc	🎜>
4	ddd
1

3