Home > Developer > JavaScript
The new day begins and our life will continue. Today we want to share different tables with you. Common tables are used to display data. The tables to be shared today not only display data, you can also edit the data. When you click the data, the corresponding data grid becomes editable. To enter the topic today, first complete the HTML page:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> JQueryProject1 </title>
<Meta name = "author" content = "Frank_Ren"/>
<Link type = "text/css" rel = "stylesheet" href = "css/myCSS.css"/>
<Script type = "text/javascript" src = "js/jquery-1.8.1.min.js"> </script>
<Script type = "text/javascript" language = "JavaScript" src = "js/myJSFile. js"> </script>
<! -- Date: 2012-09-17 -->
</Head>
<Body>
<Table>
<Thead>
<Tr>
<Th colspan = "2"> click the following to edit </th>
</Tr>
</Thead>
<Tbody id = "content">
<Tr>
<Th> Student ID </th>
<Th> name </th>
</Tr>
<Tr>
<Td> 000001 </td>
<Td> JOHN </td>
</Tr>
<Tr>
<Td> 000002 </td>
<Td> Li Si </td>
</Tr>
<Tr>
<Td> 000003 </td>
<Td> Wang Wu </td>
</Tr>
<Tr>
<Td> 000004 </td>
<Td> Zhao Liu </td>
</Tr>
</Tbody>
</Table>
</Body>
</Html>
Right, now it is still a common table, and there are no styles at all. To make this table seem less abstract, we will introduce CSS styles for it.
Copy codeThe Code is as follows:
Table {
Width: 400px;
Height: 150px;
}
Table, table td, table th {
Border: 1px solid black;
Border-collapse: collapse;
}
Table td {
Width: 50%;
Height: 25px;
}
Thead th {
Background-color: #87 CEFA;
}
Tbody th {
Background-color: # FFFACD;
}
There are only a few page elements that can be edited on the HTML page. Unfortunately, the table is not one of them. To make the table editable, You need to insert editable page elements into the table, use CSS to make it look like a common table, but it has the Editable function. This is the function that JS wants to accomplish. The JS Code is as follows:
Copy codeThe Code is as follows:
$ (Function (){
Var content;
$ ("# Content tr: odd" ).css ("background-color", "# D2B48C ");
$ ("# Content tr: even" ).css ("background-color", "# C0C0C0 ");
$ ("# Content td"). click (function (){
Var clickObj = $ (this );
Content = clickObj.html ();
ChangeToEdit (clickObj );
});
Function changeToEdit (node ){
Node.html ("");
Var inputObj = $ ("<input type = 'text'/> ");
InputObj.css ("border", "0" ).css ("background-color", node.css ("background-color "))
. Css ("font-size", node.css ("font-size" )).css ("height", "20px ")
. Css ("width", node.css ("width"). val (content). appendTo (node)
. Get (0). select ();
InputObj. click (function (){
Return false;
}). Keyup (function (event ){
Var keyvalue = event. which;
If (keyvalue = 13 ){
Node.html (node. children ("input"). val ());
}
If (keyvalue = 27 ){
Node.html (content );
}
}). Blur (function (){
If (node. children ("input"). val ()! = Content ){
If (confirm ("do you want to save the modified content? "," Yes "," No ")){
Node.html (node. children ("input"). val ());
} Else {
Node.html (content );
}
} Else {
Node.html (content );
}
});
}
});
Next, we will perform a simple analysis on this section of JS. The global variable var content is used to save the content in the previous table. Sometimes you have edited the table but do not want to save the edited result, you need to restore the content in the table before editing. Therefore, when you click the mouse, you must first save the content of the table.
The following two sentences $ ("# content tr: odd" ).css ("background-color", "# D2B48C"); $ ("# content tr: even ").css (" background-color "," # C0C0C0 ") is used to enable the table to change color across rows, just to increase the visibility of the table. Var inputObj = $ ("<input type = 'text'/>"); The evaluate () method not only sets CSS styles for an object, but also obtains CSS styles for an object, JQuery provides many such methods. Compile.
The appendTo () method implements the Editable table (appendix () and inserts the Editable element into the table .. Get (0 ). the select () method is used to select the inputObj content so that the focus falls on the Editable element. Note that the two methods must be written after appendTo () and inputObj. the click (function () {}) method is also essential. Deleting this method has an interesting bug. You can try it.
Next to the keyup (function (event) {}), you can use the event. when you press Enter, save the edited content and restore the table to a normal table. When you press the Esc key, you can restore the content in the table and restore the table to a normal table.
The appearance of Apple in user experience makes this word more deeply rooted in the hearts of the people. To improve user experience, The blur (function () {}) method is added here. When the focus leaves the Editable element, first determine whether the content in the table is changed, if there is no change, restore the table and table directly. If there is a change, the system prompts the user whether to save it.
Today's example is basically completed. If you put the JS Code in a separate JS file for reference, a Chinese garbled bug may occur, so try it. Thank you for your patience in reading this article and hope it will help you.
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
