Javascript implements simple table sorting and table operation exercises

Javascript implements simple table sorting and table operation exercises_javascript skills

WBOY

Release： 2016-05-16 17:45:02

Original

1044 people have browsed it

In this example, I practiced table operations, mainly including: tBodies, rows, cells, and the sorting method of arrays: sort
First, the code:

Copy code The code is as follows:

table sort

;

;

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

If you check the code with firebug, you will find that there will be an extra tbody, but the source code is obviously not there 
Why is this? ! 
In fact, the real structure of table is: table also includes: thead, tbody, tfoot, of which tbody can be multiple 
Back to the topic: 
About table in javascript Attributes and methods of elements: 
caption: holds a pointer to the  element (if any) 
tBodies: is an HTMLCollection of  elements 
tFoot: holds a pointer to the tHead: holds a pointer to the  element (if any) 
rows: is an HTMLCollection of all rows in a table 
createTHead(): creates < thead> element, puts it into the table, and returns a reference 
createTFoot(): Creates the  element, puts it into the table, and returns a reference 
createCaption(): Creates  element, puts it into the table, and returns a reference 
deleteTHead(): deletes the  element 
deleteTFoot(): deletes the  element 
deleteCaption(): deletes the  Element 
deleteRow(pos): Delete the row at the specified position 
insertRow(pos): Insert a row at the specified position in the rows collection 
 Attributes and methods related to tbody : 
rows : HTMLCollection that holds all rows in tbody 
deleteRow(pos): deletes the row at the specified position 
insertRow(pos): inserts a row at the specified position in the rows collection and returns a reference to the newly inserted row 
About tr attributes and methods: 
cells: HTMLCollection that saves all td (cells) of tr 
deleteCell(pos): delete the cell at the specified position 
insetCell(pos ): Insert a cell into the specified position in the cells collection and return a reference to the cell 
 OK, that’s all………………