jquery Combat--a table that can be edited

Today, I learned an example of a table that can be edited by its name. The effect of this is: click on the cell on the page, the contents of the cell becomes selected, become the status that can be entered, enter the contents into the cell, press ENTER, the cell saves its modified result, press ESC, the contents of the cell are restored to the original content. The principle is: when clicking on a cell, a text box is added to the cell, its size fills the entire cell, its contents are the contents of the cell, and the modified content is re-assigned to the cell.

HTML code:

　　

<span style= "FONT-SIZE:18PX;" ><! DOCTYPE html>CSS Code:
<span style= "FONT-SIZE:18PX;" >body {}table{    border:1px solid black;    /* Fix the problem of cell border merging */    border-collapse:collapse;    width:400px;} Table td{    border:1px solid black;    width:50%;} Table th{    border:1px solid black;    width:50%;} Tbody th{    Background-color:blue;} </span>

jquery Code:
<span style= "FONT-SIZE:18PX;" >//the background color of the parity line is different//$ (document). Ready (function () {//});//Simplified ready notation $ (function () {///Find all odd lines in the table's content area except for the first TR//use E Ven is to return all the TR elements returned by the Tbody TR, and the subscript is an even number of elements in the array, because these elements are actually the odd lines we expect.    Odd lines (odd) $ ("Tbody Tr:even"). CSS ("Background-color", "#999");    Find all the learning numbers in cell//$ ("Tbody td:even"). CSS ("Background-color", "Red");    var NUMTD = $ ("tbody Td:even");        Register the mouse click event for these cells Numtd.click (function () {///Find the td,this corresponding to the current mouse click is the one that responds to the click of the TD var Tdobj = $ (this);        if (Tdobj.children ("input"). Length > 0) {//current TD in input, do not execute click to process return false;        } var text = tdobj.html ();        Create a text box//Remove the border of the text box//Set the text in the text box to the same width as the TD width//Set the background color of the text box//You need to place the contents of the current TD in the text box var inputobj = $ ("<input type= ' text ' >"). css ("border-width", "0"). CSS ("Font-size", "16px"). Width (tdobj.width ())        . CSS ("Background-color", Tdobj.css ("Background-color")). val (text); Clear the contents of TD        Tdobj.html ("");        Insert the text library into TD Inputobj.appendto (Tdobj);        When the text box is inserted, select Inputobj.trigger ("Focus"). Trigger ("select");        Inputobj.get (0). Select ();        Inputobj.click (function () {return false;        });            Handles the carriage return on the text box and the ESC key operation Inputobj.keyup (event) {//Get key value var keycode = Event.which; Handle carriage return if (keycode = = 13) {//Gets the contents of the current text box var inputtext = Inputobj.val (                );            Tdobj.html (Inputtext);            } if (keycode = =) {tdobj.html (text);    }        }); });}); </span>

The above is the code for the entire instance. 

 
 

  
  

  
HTML Summary: 
   
 
    
The table can contain thead and tbody
 
    
The contents of the table header can be placed in th
 
   
  
  

  
CSS Summary: 
   
 
    
You can merge the borders of cells in a table by Border-collaspse:collapse this way.
 
    
When there is a background color on th, this th is the background color defined on the TR is invalid.
 
   
  
  

  
jquery Summary: 
   
 
    
$ (function () {}) is a simplified notation for the $ (document). Ready (function () {}).
 
    
$ ("tbody Tr:even") can return all TR nodes with an even number of index values in tbody (: Odd is an odd tr node).
 
    
The This in function represents the object that performs this function
 
    
The children method can get a child node of a node and can set parameters to restrict the content of the child nodes
 
    
HTML method to set or get the HTML content of a node
 
    
The Val method can get or set the value of the node
 
    
The Appendto method can append one node to the back of all child nodes of another node
 
    
The trigger method can trigger the occurrence of a JavaScript event
 
    
The parameters of an event can be defined on the parameter function of a method in jquery, and jquery masks the browser's event difference and passes it to a usable event object.
 
    
There is a which attribute on the event object of jquery, which can get the key value of the keyboard key (13= carriage return, 27=ESC)
 
   
 
 
Only through continuous practice, continuous summarization, the establishment of knowledge network, and the knowledge learned to link up, then our harvest is huge.


jquery Combat--a table that can be edited