jquery study notes 2: Implement editable tables_jquery

Implement editable table demo:

Example picture:

" -//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//Set the background color of the even number tr in tbody to #ECE9D8 $("tbody tr:even").css(" background-color", "#ECE9D8");

//Set the even number td in tbody to numTd

var numTd = $("tbody td:even");
//Give these cells Register the mouse click event
numTd.click(function() {
//Get the jquery object of the clicked element
var tdObj = $(this);
//If the clicked element contains input The control does not perform click processing
if (tdObj.children("input").length > 0) {
return false;
}
//Get the td content and append the value to text
var text = tdObj.html();
//Clear the content in td
tdObj.html("");
//Create a text box, remove the border of the text box, and set the text box The text font size in is 16px
//Make the width of the text box the same as the width of the td, set the background color of the text box, you need to put the content in the current td into the text box
//Place the text box Insert into td
var inputObj = $("").css("border-width", "0")
.css("font-size", "16px").width(tdObj.width())
.css("background-color", tdObj.css("background-color"))
.val(text).appendTo(tdObj);
//Set the trigger to trigger the focus event first and then the select event
inputObj.trigger("focus").trigger("select");
//The text box will be selected after it is inserted
inputObj.click(function() {
return false;
});
//Register keyup event
inputObj.keyup(function(event) {
//Get the current pressed Keyboard key value
var keycode = event.which;
//Handle carriage return
if (keycode == 13) {
//Get the content in the current text box
var inputtext = $(this).val();
//Modify the content of td to the content in the text box
tdObj.html(inputtext);
}
//Process esc
if (keycode == 27) {
//Restore the content in td to text
tdObj.html(text);
}
});
} );
});

tr>











> ;

















Knowledge points:
1.$(function() {}) is the abbreviation of $(document).ready(function() {}).
2. ":" in $("tbody td:even") means filtering, and even is an even function. The filtering conditions can be found in the selector of the help document. This sentence means to return the even number td in tbody, and the result is a set.
3. In the event $(this) will return the jquery object of this control.
4.children("input") means to get all the jquery objects whose child elements contain input, and the result is a collection.
5.css("border-width", "0") means setting the value of the css attribute.
6.trigger("focus").trigger("select") means that the setting event triggers focus first and then triggers select.
7.keyup(function(event) {var keycode = event.which;}) means registering keyboard events, and the which attribute of the parameter event stores keyboard information.

Click the table item with the mouse to edit it
Student ID	Name
000001	Zhang San
000002	李思
	王五
000004	Zhao Liu