jquery implementation can be edited in the form of examples of detailed "with demo source download" _jquery

This example describes a table that the jquery implementation can edit. Share to everyone for your reference, specific as follows:

Today's small series mainly for you to explain how to use JQUERY+JS+CSS to achieve the editing of the table. Next, the small series is a simple summary of how to achieve this small example.

First step: Write the HTML code, the code looks like this:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >  

To analyze the above code, it is easy to see that the table can contain thead and tbody, the contents of the header can be put into th, let's run it and see how we do it:

From the above, we can easily see that the basic outline of the table has been shown, but it seems to be a little bit less flavor, and then we set the style of the table, we write CSS code, as follows:

Table {
  border:1px solid black;
  /* Fixed cells between the border can not be combined * * *
  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;
}

Analysis of the above code, table{} This type of writing as a tag selector, can affect the entire page of the table; table td{} This notation represents all TD contained in the table ; You can merge cell borders in a table by Broder-collapse:collapse this way. Next, we even run to see the effect of the operation:

The above operating effect, has been very close to the effect we need to achieve, but still owe some heat, or can not be edited, and then, JS inside the code, the corresponding, in JS we also want to build two files, a jquery a edittable, in view of the jquery code more, So the small series has uploaded related resources, the need for small partners can download the end of the link, and then, we write uedittable code to the finishing page to add capacity:

You need to first use JavaScript to resolve the background color of the content part of the odd and even rows differently//$ (document). Ready (function () {////}); Simplified ready Writing $ (function () {//Find all odd lines in the content area of the table//use even is to return all of the TR elements that are returned through Tbody TR, in the array, the elements that are even numbered, because these elements,
  is actually the odd line in the tbody we expect ("Tbody Tr:even"). CSS ("Background-color", "#ECE9D8");
  We need to find all the school number cells var NUMTD = $ ("tbody Td:even");
    Register mouse clicks on these cells the event Numtd.click (function () {//Find the current mouse click of the td,this corresponds to the click of the TD var Tdobj = $ (this);
    if (Tdobj.children ("input"). Length > 0) {//current TD input, do not perform click processing return false;
    var text = tdobj.html ();
    Empty the contents of TD tdobj.html (""); Create a text box//get rid of the border of the text box//Set the text font size in the textbox is 16px//make the width of the text box and TD's width is the same//set the background color of the text box//need to put the contents of the current TD in the text box//text box INSERT INTO td var Inputobj = $ ("<input type= ' text ' >"). css ("border-width", "0"). CSS ("Font-size", "16px"). Width (tdob
    J.width ()). CSS ("Background-color", Tdobj.css ("Background-color")). Val (text). Appendto (Tdobj); is selected Inputobj.trigger ("Focus") after the text box has been inserted. tRigger ("select");
    Inputobj.click (function () {return false;
    });
      Handles the action Inputobj.keyup (event) {//Get the key value of the currently pressed keyboard var keycode = Event.which on the text box with carriage returns and ESC keys;
        Process carriage return if (keycode = = 13) {//get content var Inputtext = $ (this) in the current text box. Val ();
      Modify the contents of TD to the contents of the text box tdobj.html (inputtext);
      ///Handling ESC if (KeyCode = 27) {//convert content in TD to Text tdobj.html (text);
  }
    });
});

 });

The operation effect is as follows:

Full instance code click here to download the site.

More interested readers of jquery-related content can view the site: "jquery form Operation Tips", "jquery common Plug-ins and Usage summary", "jquery operation JSON data techniques Summary", "JQuery Extended Skills Summary", " jquery drag-and-drop effects and tips summary, jquery table (table) Operation tips Summary, "jquery Ajax Usage Summary", "jquery common Classic Effects Summary", "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"

I hope this article will help you with the jquery program design.