Javascript implements simple table sorting and table operation exercises_javascript skills

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:

;









;


🎜>
<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

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………………

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn