The content in this article is basically from the video tutorial on itcast.
This example implements a cool function. In a table, double-click it to change it from read-only to editable. In fact, it is easy to think about it. It is nothing more than the following steps:
However, those who have used JavaScript will soon realize that the amount of code to implement these functions will be large. Fortunately, we are very helpful. We can use jquery to easily implement these functions.
To edit a table, follow these steps:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" <br/> "http://www.w3.org/TR/html4/loose.dtd"> <br/> <HTML> <br/> <pead> <br/> <title> jquery example of itcast.cn: editable table </title> <br/> <! -- <Link type = "text/CSS" rel = "stylesheet" href = "CSS/edit.css" mce_href = "CSS/edit.css"/> --> <br/> <MCE: script Type = "text/JavaScript" src = "jslib/jquery. JS "mce_src =" jslib/jquery. JS "> </MCE: SCRIPT> <br/> <MCE: Script Type =" text/JavaScript "src =" jslib/jqueryedit. JS "mce_src =" jslib/jqueryedit. JS "> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <! -- A simple table. one row and two columns, we can modify the data in the table when clicking --> <br/> <Table border = "1px"> <br/> <tbody> <br/> <tr> <br //> <TD> 123123 </TD> <br/> <TD> 456456 </TD> <br/> </tr> <br/> </tbody> <br /> </table> <br/> </body> <br/> </ptml>
// When loading the page, make all TD have a click event <br/> $ (document ). ready (function () {<br/> // find all TD nodes <br/> var TDS =$ ("TD "); <br/> // Add a click event to all TD nodes <br/> TDs. click (tdclick); <br/>}); <br/> // TD clicked event <br/> function tdclick () {<br/> // 0. save the current TD node <br/> var TD =$ (this); <br/> // 1. extract and save the text in the current TD <br/> var text = TD. text (); <br/> // 2. clear content in TD <br/> td.html (""); // you can also use TD. empty (); <br/> // 3. create a text box, that is, the input element node <br/> VaR Input = $ ("<input>"); <br/> // 4. set the value of the text box to the saved text content <br/> input. ATTR ("value", text); <br/> // 4.5 enables the text box to respond to events that occur when the keyboard is pressed and popped up. It is mainly used to process the press return confirmation. <br/> input. keyup (function (event) {<br/> // 0. obtain the key value pressed by the current user <br/> // solves the difference between obtaining event objects from different browsers <br/> var myevent = event | window. event; <br/> var kcode = myevent. keycode; <br/> // 1. determine whether to press ENTER <br/> If (kcode = 13) {<br/> var inputnode = $ (this); <br/> // 2. save the content of the current text box <br/> var intpute XT = inputnode. val (); <br/> // 3. clear content in TD <br/> var tdnode = inputnode. parent (); <br/> // 4. Fill in the content of the saved text box to TD <br/> tdnode.html (intputext); <br/> // 5. allow td to re-own the click event <br/> tdnode. click (tdclick); <br/>}< br/>}); <br/> // 5. add the text box to TD <br/> TD. append (input); // you can also use input. appendto (TD) <br/> // 5.5 highlight the text in the text box <br/> // convert the jquery object to a DOM object <br/> var inputdom = input. get (0); <br/> inputdom. select (); <br/> // 6. you need to clear the Click Event on TD <br/> TD. unbind ("click"); <br/>}
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
