JQuery-editable tables

Today I learned how to use jQuery to edit a table. In this example, you can click a cell in the foreground table to modify the content. Press enter to save the modified content and esc to cancel the saved content. Principle: When you click a table cell on the client, add a text box to the cell, assign the original content to the text box, and then modify the text box content, after modification, the text box content is assigned to the cell.

Source code:

Front-end code:

<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "WebForm1.aspx. cs" Inherits = "WebApplication1.WebForm1" %>
     Jq2-editable tables    
 <Script type = "text/javascript" src = "js/jquery. js "> </script> <script type =" text/javascript "src =" js/editTable. js "> </script> <% -- <script type =" text/javascript "src =" js/jquery-1.9.1.js "> </script> -- %>    

Css code:

Body {} table {border: 1px solid #000000; border-collapse: collapse;/* merge cell Borders */width: 400px;} table td {border: 1px solid #000000; width: 50%;} table th {border: 1px solid #000000; width: 50%;} tbody th {background-color: # Empty Fae ;}

Jquery code

$ (Function () {// locate all even rows except the first tr in the table // use even to return all tr elements through tbody tr $ ("tbody tr: even "2.16.css (" background-color "," # ece9d8 "); // find all student ID cells var numId = $ (" tbody td: even "); // register the mouse click event numId for the cell. click (function () {// find the td corresponding to the current mouse click. this corresponds to the td var tdObj =$ (this) responding to the click ); // determine whether the text box if (tdObj. children ("input "). length> 0) {return false;} // obtain the table content var text = tdObj.html (); // clear the content in td tdObj.html (""); // Create a text box // remove the border of the text box // set the font of the text box to be the same as that of the text box. // Set the background color of the text box to the same as the background color of the table. // The width of the text box is the same as that of the td. // Add the td value to the text box. // Insert the text box to the td var inputObj = $ (""Fig (" border-width "," 0 "Fig (" font-size ", tdObj.css (" font-size "Fig (" background-color ", tdObj.css ("background-color ")). width (tdObj. width ()). val (text ). appendTo (tdObj); // after the text box is inserted, the focus is obtained first, and inputObj is selected. trigger ("focus "). trigger ("select") // The inputObj event cannot be triggered after the text box is inserted. click (function () {return false ;}); // process the inputObj operation by pressing the carriage return and esc buttons in the text box. keyup (function (event) {// obtain the key value var keycode = event for the currently pressed keyboard. which; // if (keycode = 13) when the carriage return is processed {// obtain the content var inputtext = $ (this) in the current text box ). val (); // modify the content in td to the content in the text box tdObj.html (inputtext);} // process the content of esc if (keycode = 27) {// restore the content in td to the original content tdObj.html (text );}});});});

Summary: knowledge points that can be learned through this instance:

I. html

1. the table can contain thead and tbody.

2. the header content can be placed in th.

3. the syntax of table {} is called the tag selector, which can affect the entire table.

4. table td {} indicates all td contained in the table.

Ii. jquery

Four different parameters can be placed in the brackets of $ ().

1. Directly place the function parameter to indicate that the page has been loaded. For example, in the preceding example, row 1st in jquery code $ (function (){})

2. parameters can be css class selectors and packaged into a jquery object. For example, in the preceding example, line 4th of jquery code $ ("tbody tr: even ")

3. If the parameter is html text, you can create a dom node and wrap it into a jquery object. For example, in the preceding example, the 27th line of jquery code $ ("")

4. The parameter can be a dom object. This method is equivalent to replacing the dom object with a jquery object. In the above example, the 11th line var tdObj of jquery code =$ (this)

Jquery object in this example

1. css attributes are added to the jquery object to set the css attributes of the node. For example, line 4th in the jquery code in the above example ("tbody tr: even" ).css ("background-color", "# ece9d8 ");

2. The jquery object contains the dom node corresponding to the selector, Which is saved as an array.

3. Add the html method to the jquery object to set or obtain the html content of the node. For example, in the above example, the 17th line var text = tdObj.html () in jquery code ()

4. Add the val method to the jquery object to obtain or set the value of the node. For example, in the jquery code above, the first line var inputtext =$ (this). val ()

5. Add the width method after the jquery object to set or obtain the width of a node. For example, in the above example, the jquery Code contains the 27th line tdObj. width ()

6. Add the apppendTo method after the jquery object to append a node to all the subnodes of the other node. For example, in the above example, the appendTo (tdObj) line 27th in jquery code)

7. Add the trigger method to the jquery object to start a js event. For example, in the jquery code above, the first line of inputObj. trigger ("focus"). trigger ("select ")

8. Add the children method to the jquery object to obtain the subnode of a node. You can set parameters to limit the content of the subnode. For example, in the above example, the 13th line tdObj. children ("input"). length in jquery code

9. If the jquery object returned by the selector contains multiple dom nodes and a similar click event is registered on this object, all dom nodes will be used for this event. For example, in the above example, the jquery Code contains row 9th numId. click;

Source Code address: http://download.csdn.net/detail/suneqing/7396107