The same table? Different tables (editable state table)_jquery

A new day has begun, and life continues. What I want to share with you today is a different table. An ordinary table is used to display data. The table I want to share today can not only display data, but also edit data. When the mouse clicks on the data, the corresponding data grid becomes editable. Without further ado, let’s get into today’s topic. First complete the HTML page:

Copy the code The code is as follows:

< ;table>


Click the following content with the mouse to edit




Student ID
Name


000001
Zhang San
< ;/tr>

000002
李思 tr>
000003
王五


000004
Zhao Liu






Yes, it is still an ordinary table with no style at all. In order to make this table less abstract, let’s introduce CSS styles to it.

Copy code The code is as follows:

table{

width:400px;
height: 150px;
}
table, table td, table th{
border:1px solid black;
border-collapse: collapse;
}
table td{
width:50%;
height: 25px;
}
thead th{
background-color:#87CEFA;
}
tbody th{
background-color:# FFFACD;
}


There are only a few editable page elements in the HTML page. Unfortunately, table is not one of them. In order to make the table editable, you need to add table Insert editable page elements into it, and then decorate it with CSS to make it look like an ordinary table, but with editable functions. This is what JS wants to accomplish. The JS code is as follows:

Copy code The code is as follows:

$(function(){

var content;
$( "#content tr:odd").css("background-color","#D2B48C");
$("#content tr:even").css("background-color","#C0C0C0") ;
$("#content td").click(function(){
var clickObj = $(this);
content = clickObj.html();
changeToEdit(clickObj);
});
function changeToEdit(node){
node.html("");
var inputObj = $("");
inputObj.css("border","0").css("background-color",node.css("background-color"))
.css("font-size",node.css(" font-size")).css("height","20px")
.css("width",node.css("width")).val(content).appendTo(node)
. get(0).select();
inputObj.click(function(){
return false;
}).keyup(function(event){
var keyvalue = event.which;
if(keyvalue==13){
node.html(node.children("input").val());
}
if(keyvalue==27){
node .html(content);
}
}).blur(function(){
if(node.children("input").val()!=content){
if(confirm ("Save the modified content? ","Yes","No")){
node.html(node.children("input").val());
}else{
node.html(content);
}
}else{
node.html(content);
}
});
}
});


Next, let’s do a simple analysis of this JS. The global variable var content is used to save the content in the table before editing. Sometimes the user edits the table but does not want to save the edited result, so he needs to save the table. The contents in are restored to before editing, so when the mouse is clicked, the contents of the table must be saved first.

The following two sentences $("#content tr:odd").css("background-color","#D2B48C"); $("#content tr:even").css("background -color","#C0C0C0"); is to make the table have alternate row colors, just to increase the visibility of the table. var inputObj = $(""); This sentence generates an editable JQuery object, which is to insert editable elements in the table. The following .css() methods It is to add CSS style to the inputObj object. The .css() method can not only set the CSS style for an object but also obtain the CSS style of an object. JQuery provides many such methods. Many times the JQuery object is returned after the JQuery method is executed, so inputObj.css().css().css().... appears. The

appendTo() method realizes the editability of the table (appendix() can also be used) and inserts editable elements into the table. The two methods .get(0).select() are used to select the content in inputObj so that the focus falls on the editable element. It should be noted that these two methods must be written after appendTo(), inputObj.click( The function(){}) method is also essential. Deleting this method will cause an interesting bug. You can give it a try.

The following keyup(function(event){}) can be used to obtain the key value corresponding to the key pressed on the keyboard through event.which. Commonly used key values ​​include Enter key: 13, Esc key :27. When the user presses the Enter key, the edited content is saved and the table is restored to a normal table. When the user presses the Esc key, the contents of the table are restored and the table is restored to a normal table.

User experience, the emergence of Apple has made this word more popular, and we are here to join in the fun. In order to improve the user experience, the blur(function(){}) method is added here. When the focus leaves the editable element, first determine whether the content in the table has been changed. If there is no change, directly restore the table and the contents in the table. If there is a change, Prompts the user whether to save.

Today’s example is basically completed. If you reference the JS code in a separate JS file, a Chinese garbled bug may appear. You might as well give it a try. Thank you for your patience in reading this article, I hope it will be helpful to you.