Today I learned the example of using jquery to implement a table that can be edited. This example needs to be: Click a cell in the foreground table to modify the contents, return key to save the changes, ESC to undo the saved content. Principle: When you click the Client table cell, you add a text box to the cell, assign the original contents of the cell to the text box, and further modify the contents of the text box, and then reassign the text box contents to the cell after you modify it.
Source:
Foreground code:
Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= "true" codebehind= "WebForm1.aspx.cs" inherits= "Webapplication1.webform1"% >
<! DOCTYPE html
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jq2-can edit the form </title>
<link href= "Css/edittable.css" rel= "stylesheet"/>
<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>--%>
<body>
<form id= "Form1" runat= "Server" >
<div>
<table>
<thead>
<tr>
<th colspan= "2" > Mouse click on the table entry can be edited </th>
</tr>
</thead>
<tbody>
<tr>
<th> School Number </th>
<th> name </th>
</tr>
<tr>
<td>000001</td>
<td> John </td>
</tr>
<tr>
<td>000002</td>
<td> Dick </td>
</tr>
<tr>
<td>000003</td>
<td> Harry </td>
</tr>
<tr>
<td>000004</td>
<td> Zhao Liu </td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
CSS code:
Copy Code code as follows:
Body {
}
Table {
border:1px solid #000000;
border-collapse:collapse;/* Cell Border Merge */
width:400px;
}
Table TD {
border:1px solid #000000;
width:50%;
}
Table th {
border:1px solid #000000;
width:50%;
}
tbody th {
Background-color: #426fae;
}
jquery Code
Copy Code code as follows:
$ (function () {
Find all even rows in the table except the first TR
Use even to return all TR elements through Tbody TR
$ ("Tbody Tr:even"). CSS ("Background-color", "#ece9d8");
Find all the school number cells
var Numid = $ ("tbody Td:even");
Register mouse click events for cells
Numid.click (function () {
Find corresponding to the current mouse click of the td,this corresponding to the click of the TD
var tdobj = $ (this);
Determine if there is a text box in TD
if (Tdobj.children ("input"). Length>0) {
return false;
}
Get the contents of a table
var text = tdobj.html ();
Clear the contents of TD
Tdobj.html ("");
Create a text box
Remove the border of a text box
Sets the font in the text box to the same size as the text in the table.
Sets the background color of the text box to the same as the background color of the table
Is that the width of the text box is the same width as the TD
And put the values in the TD into the text box
Inserts a text box into the TD
var inputobj = $ ("<input type= ' text ' >"). css ("border-width", "0"). CSS ("Font-size", Tdobj.css ("Font-size")). CSS ( "Background-color", Tdobj.css ("Background-color")). Width (Tdobj.width ()). val (text). Appendto (Tdobj);
After the text box is inserted, get the focus, and then select
Inputobj.trigger ("Focus"). Trigger ("select")
Cannot be triggered when a text box is inserted click event
Inputobj.click (function () {
return false;
});
Work with the return and ESC keys on a text box
Inputobj.keyup (function (event) {
Gets the key value of the keyboard that is currently pressed
var keycode = Event.which;
Handling of carriage returns
if (keycode==13) {
Get the contents of the current text box
var Inputtext = $ (this). Val ();
Modify the contents of the TD to the contents of the text box
Tdobj.html (Inputtext);
}
Handling the contents of ESC
if (keycode==27) {
Restore content from TD to original content
tdobj.html (text);
}
});
});
});
Summary: The knowledge that can be obtained through the study of this example:
First, the HTML aspect
1.table can contain thead and tbody
2. The contents of the header can be placed in th
3.table{} This type of writing is called a tag selector and can have an effect on the entire table.
4.table td{} This notation represents all the TD contained in the table.
Second, the jquery aspect
4 different parameters can be placed in brackets of $ ()
1. The parameters are placed directly to indicate that the page is loaded: For example, the 1th line of the jquery code in the above example is $ (function () {})
2. The parameter can be a CSS class selector and is packaged into a jquery object. For example: The 4th line of the jquery code in the above example $ ("Tbody Tr:even")
3. If the parameter is HTML text, you can create a DOM node and wrap it as a jquery object. For example: the 27th line of the jquery code in the above example $ ("<input type= ' text ' >")
4. The parameter can be a DOM object, which is equivalent to a DOM object loaded into a jquery object. The 11th line of the jquery code in the above example is var tdobj = $ (This)
The jquery object in this example
1.jquery object with CSS properties, you can set the CSS properties of the node. For example, the 4th line of the jquery code in the above example is $ ("Tbody Tr:even"). CSS ("Background-color", "#ece9d8");
The 2.jquery object content contains the corresponding DOM node of the selector, which is saved as an array.
The HTML method behind the 3.jquery object allows you to set or get the HTML content of the node. For example, the 17th line of the jquery code in the above example is var text = tdobj.html ()
The 4.jquery object is followed by the Val method to get or set the value of the node. For example, the 41st line of the jquery code in the above example is var Inputtext = $ (this). Val ()
5.jquery object with the Width method, you can set or get the widths of a node. For example, the 27th line of the jquery code in the above example Tdobj.width ()
A 6.jquery object followed by the Apppendto method can append one node to all child nodes of the other node. For example, the 27th line of the jquery code in the above example Appendto (tdobj)
7.jquery object After adding trigger method can start a JS event occurred. For example, the 29th line Inputobj.trigger ("Focus") in the jquery code in the above example. Trigger ("select")
8.jquery object After the children method can obtain a node's child nodes, you can set parameters to limit the content of child nodes. For example, the 13th line of the jquery code in the above example is Tdobj.children ("input"). length
9. If the jquery object returned by the selector contains more than one DOM node, register a similar click event on this object, and all DOM nodes will be used for this event. For example, the 9th line of jquery code in the above example Numid.click;
