To implement an editable table demo:
Example diagram:
Code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script type= "Text/jscript" src= "Jquery-1.4.2.min.js" ></script>
<script type= "Text/jscript" language= "JavaScript" >
Simplified ready: Call when page load completes
$ (function () {
Sets the background color of even TR within tbody to #ece9d8
$ ("Tbody Tr:even"). CSS ("Background-color", "#ECE9D8");
Set the even TD within the TBODY to NUMTD
var NUMTD = $ ("tbody Td:even");
Register mouse Click events for these cells
Numtd.click (function () {
Take a jquery object that hits the element
var tdobj = $ (this);
If the clicked element contains the input control, click Processing is not performed
if (Tdobj.children ("input"). Length > 0) {
return false;
}
Take TD content attached to text
var text = tdobj.html ();
Clear the contents of TD
Tdobj.html ("");
Create a text box, remove the border from the text box, and set the font size of text in the box to be 16px
Make the width of the text box the same width as TD, set the background color of the text box, and place the contents of the current TD in the text box
Inserts a text box into the TD
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). Appendto (Tdobj);
Setting a trigger triggers the focus event before the Select event is triggered
Inputobj.trigger ("Focus"). Trigger ("select");
is selected after the text box has been inserted
Inputobj.click (function () {
return false;
});
Registering KeyUp Events
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) {
Gets the contents of the current text box
var Inputtext = $ (this). Val ();
Modify the contents of TD to the contents of the text box
Tdobj.html (Inputtext);
}
Handling the ESC situation
if (keycode = = 27) {
Restore content in TD to text
tdobj.html (text);
}
});
});
});
</script>
<style type= "Text/css" >
Table
{
BORDER:1PX solid black;
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: #A3BAE9;
}
</style>
<body>
<form id= "Form1" runat= "Server" >
<table>
<thead>
<tr>
<th colspan= "2" >
Click on the mouse to edit the table item
</th>
</tr>
</thead>
<tbody>
<tr>
<th>
School Number
</th>
<th>
Name
</th>
</tr>
<tr>
<td>
000001
</td>
<td>
Tom
</td>
</tr>
<tr>
<td>
000002
</td>
<td>
John doe
</td>
</tr>
<tr>
<td>
000003
</td>
<td>
Harry
</td>
</tr>
<tr>
<td>
000004
</td>
<td>
Zhao Liu
</td>
</tr>
</tbody>
</table>
</form>
</body>
Knowledge Points:
1.$ (function () {}) is a shorthand for $ (document). Ready (function () {}).
2.$ ("Tbody Td:even") ":" means filtering, even to even functions, filter criteria can be found in the Help document's selector. This sentence represents the return of even TD within TBODY and the result is a collection.
3. In the event $ (this) will return the JQuery object for this control.
4.children ("input") represents a jquery object that takes all the child elements containing input, and the result is a collection.
5.css ("Border-width", "0") indicates the value of setting the CSS property.
6.trigger ("Focus"). Trigger ("Select") indicates that the setting event triggers the focus first, and then the select is triggered.
7.keyup (function (event) {var keycode = Event.which;}) Represents a registered keyboard event, and the which property of the parameter event stores keyboard information.
