JQuery implements directly editable tables

JQuery implements directly editable tables

Function:

Create a table. After you click a cell, you can directly modify the cell text.
In the editing status, you can press enter to confirm the modification and Press ESC to cancel the modification.

The effect is as follows:

Ideas:

After clicking a cell, the user immediately inserts a text box into the cell and sets its width and height to the value corresponding to the cell. After you confirm the input, clear all the HTML code in the cell and set the content to the text you just entered.

HTML code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<Table align = "center"> <Tr> <Td> Student ID </td> <Td> name </td> </Tr> <Tr> <Td> 001 </td> <Td> dog </td> </Tr> <Tr> <Td> 002 </td> <Td> cat </td> </Tr> <Tr> <Td> 003 </td> <Td> pig </td> </Tr> </Table>

JavaScript code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

$ (Function (){ $ ("Td"). click (function (event ){ // If input already exists in td, you do not need to respond to the Click Event If ($ (this). children ("input"). length> 0) Return false; Var tdObj = $ (this ); Var preText = tdObj.html (); // Obtain the current text content Var inputObj = $ ("<input type = 'text'/> "); // Create a text box element TdObj.html (""); // clear all elements in td InputObj . Width (tdObj. width ()) // Set the text box to the same width as td . Height (tdObj. height ()) . Css ({border: "0px", fontSize: "17px", font: ""}) . Val (preText) . AppendTo (tdObj) // Insert the text box to the end of the tdObj subnode. . Trigger ("focus ") // Trigger an event using the trigger Method . Trigger ("select "); InputObj. keyup (function (event ){ If (13 = event. which) // Press ENTER { Var text = $ (this). val (); TdObj.html (text ); } Else if (27 = event. which) // ESC key { TdObj.html (preText ); } }); // After the click event is edited, the click event is not processed. InputObj. click (function (){ Return false; }); }); });