In this column, I practiced table operations, including tBodies, rows, and cells, and sorting methods for Arrays: sort, if you are interested, you can study the table operations in this column, including tBodies, rows, and cells, and the sorting method of Arrays: sort.
First run the Code:
The Code is as follows:
Table sorting
| 2 |
Bbb |
|
|
| 5 |
Eee |
|
|
| 3 |
Ccc |
|
|
| 4 |
Ddd |
|
|
| 1 |
Aaa |
|
|
Script
Window. onload = function (){
Var oTable = document. getElementById ('tabletest ');
Var oTbody = oTable. tBodies [0];
Var oBtn = document. getElementById ('sort ');
Var arr = []; // used to store every tr
Var isAsc = true; // used to determine the ascending or descending order.
OBtn. onclick = function (){
For (var I = 0; I <oTbody. rows. length; I ++ ){
Arr [I] = oTbody. rows [I]; // store each tr in an array instead of the sort criterion (cells [0]. innerHTML)
}
// The array is sorted by 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 );
}
});
// Re-insert the sorted tr into the tbody
For (var j = 0; j <arr. length; j ++ ){
OTbody. appendChild (arr [j]);
}
// Judge ascending and descending order
IsAsc =! IsAsc;
}
}
Script
The following are some related knowledge points:
We all know that normally used DOM can be getElementsByTagName and getElementById cloud to get relevant nodes.
This method can also be implemented in table.
Obviously, this operation will be very troublesome.
Therefore, we can use another method and attribute to operate the table:
Before that, let's talk about table:
I believe many people write the table directly in this way:
The Code is as follows:
If you look at the code in firebug, you will find that there will be an additional tbody, and the source code is clearly unavailable.
This is Mao ?!
In fact, the real structure of the table is: The table also includes thead, tbody, tfoot, where tbody can be multiple
Back to topic:
Attributes and methods of table Elements in javascript:
Caption: SaveElement (if any) pointer
TBodies: IsHTMLCollection of Elements
TFoot: SaveElement (if any) pointer
THead: savesElement (if any) pointer
Rows: HTMLCollection of all rows in a table
CreateTHead (): CreateElement, put it in the table, and return the reference
CreateTFoot (): CreateElement, put it in the table, and return the reference
CreateCaption (): CreateElement, put it in the table, and return the reference
DeleteTHead (): DeleteElement
DeleteTFoot (): DeleteElement
DeleteCaption (): DeleteElement
DeleteRow (pos): deletes a specified location row.
InsertRow (pos): Insert a row to a specified position in the rows set
Tbody attributes and Methods:
Rows: The HTMLCollection that stores all rows of the tbody
DeleteRow (pos): deletes a row at a specified position.
InsertRow (pos): inserts a row at a specified position in the rows set and returns a reference to the newly inserted row.
Tr attributes and Methods:
Cells: stores the HTMLCollection of all td (cells) of tr.
DeleteCell (pos): deletes a cell at a specified position.
InsetCell (pos): inserts a cell into the specified position in the cell set and returns a reference to the cell.
OK. Let's just talk about this ..................
