Use jQuery to implement editable tables_jquery

$(function () {
//Find all even rows in the table except the first tr
//Use even in order to return all tr ​​elements through tbody tr
$( "tbody tr:even").css("background-color", "#ece9d8");
//Find all student number cells
var numId = $("tbody td:even");

//Register mouse click event for the cell
numId.click(function () {
//Find the td corresponding to the current mouse click, this corresponds to the td that responded to the click
var tdObj = $(this);
//Determine whether there is a text box in td
if (tdObj.children("input").length>0) {
return false;
}
//Get the content in the table
var text = tdObj.html();
//Clear the content in td
tdObj.html("");
//Create Text box
//Remove the border of the text box
//Set the font size in the text box to be the same as the text in the table
//Set the background color of the text box to be the same as the background color of the table
. //The width of the text box is the same as the width of td
//Put the value in td into the text box
//Insert the text box into 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, it gets focus first and then selects it
inputObj.trigger("focus").trigger("select")
//The click event cannot be triggered after the text box is inserted
inputObj.click(function () {
return false;
});
//Process the operation of the enter and esc keys on the text box
inputObj.keyup(function (event) {
//Get the key value of the currently pressed keyboard
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 in td to the content of 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);
}
});
});
});