Home > Developer > JavaScript
In this column, I practiced table operations, including tBodies, rows, and cells, and the sorting method of Arrays: sort.
First run the Code:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> table sorting </title>
</Head>
<Body>
<Table id = "tableTest" width = "400" border = "1">
<Tbody>
<Tr>
<Td> 2 </td>
<Td> bbb </td>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> 5 </td>
<Td> eee </td>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> 3 </td>
<Td> ccc </td>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> 4 </td>
<Td> ddd </td>
<Td> </td>
<Td> </td>
</Tr>
<Tr>
<Td> 1 </td>
<Td> aaa </td>
<Td> </td>
<Td> </td>
</Tr>
</Tbody>
</Table>
<Input type = "button" id = "sort" value = "Table sorting"/>
<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>
</Body>
</Html>
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:
Copy codeThe Code is as follows:
<Table id = "tableTest" width = "400" border = "1">
<Tr>
<Td> 3 </td>
<Td> ccc </td>
<Td> </td>
<Td> </td>
</Tr>
</Table>
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: saves the pointer to the <caption> element (if any)
TBodies: An HTMLCollection of <tbody> Elements
TFoot: saves the pointer to the <tfoot> element (if any)
THead: stores pointers to <thead> elements (if any ).
Rows: HTMLCollection of all rows in a table
CreateTHead (): Create the <thead> element, put it in the table, and return the reference.
CreateTFoot (): Create a <tfoot> element, put it in the table, and return a reference.
CreateCaption (): Create a <caption> element, put it in the table, and return a reference.
DeleteTHead (): deletes the <thead> element.
DeleteTFoot (): deletes the <tfoot> element.
DeleteCaption (): deletes the <caption> element.
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 ..................
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
