A table that can be edited.
1. First write a page containing the table jqueryedit.html:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<title>jquery Example 3: Modifiable tables </title>
<script type= "Text/javascript" src= "Jslib/jquery.js" ></script>
<script type= "Text/javascript" src= "Jslib/jqueryedituseblur.js" ></script>
<body>
<table border= "1" >
<tbody>
<tr>
<td>1234</td>
<td>5678</td>
</tr>
</tbody>
</table>
</body>
2. Write a JavaScript script file to complete the editable effect of the table, Jqueryedit.js:
in this file, when the input box after the change is submitted by the ENTER key, the following file is the mouse relative to the text box loses focus to achieve the submission, I think the following second method is more realistic.
When the page loads, let all TD have a click event
$ (document). Ready (function () {
var tdnods = $ ("TD");
Tdnods.click (Tdclick);
});
TD Click-Triggered function
function Tdclick () {
1. Remove the text content from the current TD
var td = $ (this);
var tdtext = Td.text ();
2. Clear the text contents of TD
Td.html (""); You can also use Td.empty ();
3. Create an input box, which is the input tag
var input = $ ("<input>");
4. Set the contents of the input box to the text content of the TD that you just saved
Input.attr ("value", tdtext);
4.5. Allow the text box to respond to the KeyUp event that is pressed by the keyboard, mainly for handling carriage return confirmation
Input.keyup (function (event) {
1. Gets the key value pressed by the current user
To solve the differences between different browsers getting event objects,
IE is provided automatically with Window.event, while other browsers must display the supplied, i.e. add an event to the method parameter
var myevent = Event | | window.event;
var keycode = Myevent.keycode;
2. Determine if it is a carriage return press
if (keycode = = 13) {
2. Save the contents of the current input box
var input = $ (this);
var inputtext = Input.val ();//This place cannot be used with text (), but with Val ()
3. Clear the TD content, that is, remove the input box
var td = Input.parent ("TD");
Td.empty ();
4. Populate the TD with the saved text content
Td.html (Inputtext);
5. Let TD re-own click events
Td.click (Tdclick);
}
});
5. Add the input box to TD
Td.append (input); can also use Input.appendto (TD);
5.5 Let the text in the TextBox be highlighted
Need to convert a jquery object to a DOM object
var inputdom = input.get (0);
Inputdom.select ();
6. Need to remove the Click event on TD
Td.unbind ("click");
};
The following script file is the jqueryedituseblur.js of the commit by losing focus with the mouse relative to the text box:
The following is shown in red is a different place than the above file.
When the page is loaded, the TD node has the click Ability
$ (document). Ready (function () {
var tdnods = $ ("TD");
Tdnods.click (Tdclick);
});
TD's Click Events
function Tdclick () {
Save the TD text content
var td = $ (this);
var tdtext = Td.text ();
Empty the TD content
Td.empty ();
Create a new input box
var input = $ ("<input>");
Assign the saved text content to the input box
Input.attr ("value", tdtext);
Add an input box to the TD
Td.append (input);
//Register the event with the input box and save the text when the focus is lost.
Input.blur (function () {
Save the text of the input box
var input = $ (this);
var inputtext = Input.val ();
The TD content, that is, the input box is removed, and then to the TD assigned value
var td = Input.parent ("TD");
Td.html (Inputtext);
Let TD re-own click events
Td.click (Tdclick);
});
Highlight the text in the input box
Convert a jquery object to a DOM object
var inputdom = input.get (0);
Inputdom.select ();
To remove a TD click Event
Td.unbind ("click");
}
3. The above effects are further modified to make it more humane (red font is a modified place)
by modifying the contents of the text so that you are in the process of the modification, you can press ESC to undo the restore to the pre-modified state
When the page is loaded, the TD node has the click Ability
$ (document). Ready (function () {
var tdnods = $ ("TD");
Tdnods.click (Tdclick);
});
TD's Click Events
function Tdclick () {
Save the TD text content
var td = $ (this);
var tdtext = Td.text ();
Empty the TD content
Td.empty ();
Create a new input box
var input = $ ("<input>");
Assign the saved text content to the input box
Input.attr ("value", tdtext);
Add an input box to the TD
Td.append (input);
Register an event with the input box to save the text when the focus is lost
Input.blur (function () {
Save the text of the input box
var input = $ (this);
var inputtext = Input.val ();
The TD content, that is, the input box is removed, and then to the TD assigned value
var td = Input.parent ("TD");
Td.html (Inputtext);
Let TD re-own click events
Td.click (Tdclick);
});
Input.keyup (function (event) {
1. Gets the key value pressed by the current user
To solve the differences between different browsers getting event objects,
IE is provided automatically with Window.event, while other browsers must display the supplied, i.e. add an event to the method parameter
var myevent = Event | | window.event;
var keycode = Myevent.keycode;
2. Determine if the ESC key is pressed
if (keycode = = 27) {
Restores the value of input box to the value before modification
Input.val (Tdtext);
}
});
Highlight the text in the input box
Convert a jquery object to a DOM object
var inputdom = input.get (0);
Inputdom.select ();
To remove a TD click Event
Td.unbind ("click");
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
