Jquery edit data

The effect is here! Click the data item to edit it. The most common result is that it has been on e-mapreduce for a long time. You only need to modify the image description to perform this operation. I tried to use jquery to implement this function ......

Assume that the following elements already exist in the DOM:

<Div id = "data_1"> <Div id = "data_div_1 ″
Onclick = "edititem (1, 'boho');"> boho </div>
<Div
Id = "data_2"> <Div id = "data_div_2 ″
Onclick = "edititem (2, 'boho. net@gmail.com ');"> boho.net@gmail.com </div>
<Div
Id = "data_3"> <Div id = "data_div_3 ″
Onclick = "edititem (3, 'HTTP: // www.lzby.net/boho/blog');"> http://www.lzby.net/boho/blog </div>

The data_div_1, data_div_2, and data_div_3 elements all accept click events and execute the edititem function. To avoid the onclick event being triggered during editing, these three elements are embedded in the data_1, data_2, and data_3 elements of the outer layer. The outer element will be set by the edititem function to a new HTML. Edititem function body:

Function edititem (div_id, div_val ){
VaR show = "<Input
Onblur = \ "editok (" + div_id + ", this. Value); \" type = \ "text \"
Id = \ "data_edit _" + div_id + "\" value = \ "+ div_val +" \ "/> ";

Upload (1_1_data_1_1_div_id1_.html (show );
$ ("# Data_edit _" + div_id). Focus ();
}

A function has two parameters. The div_id parameter indicates which outer Div element the function is going to set a new HTML. If 1 is sent, set HTML for the data_1 element. The div_val parameter is the value of the original data. It is passed to provide the default data value in the editing status. Otherwise, the editing status is empty, which is not a good user experience. The function first sets the show variable to assign the new HTMLCodeAnd then set the code to the outer element Div. In fact, the edit box is set to the element, and the focus is immediately placed in the edit box, waiting for the user to edit. The edit box contains an onblur event that leaves focus. When the edit box leaves focus, run the editok function. Editok function body:

Function editok (div_id, div_val ){
VaR show = "<Div
Id = \ "data_div _ \" + div_id +"
Onclick = \ "edititem (" + div_id + ", '" + div_val + "'); \"> "+ div_val +" </div> ";

Upload (1_1_data_1_1_div_id1_.html (show );
}

The function also has two parameters. The div_id parameter also tells the function to set the modified value to the DIV element. The div_val parameter is the new data value after editing. value (the current value in the editing box) is passed. All the function needs to do is to set the value to the DIV element, indicating that the editing is successful. When setting a new value, you must set the inner element of the embedded outer Div together with the click event. Otherwise, you must set a new value without clicking the DIV of the event, you can't click Edit again ......

This is just a simple edit. If you call the $. Post object of jquery, you can post the new value to the database and slightly change the editok function to synchronize new data to the database.

These features are available in Asp.net
Ajax is also very easy to implement. Asp.net itself has a gridview control, which allows you to set the data editing status. You only need to include updatepanel outside the control. It is also a very powerful application ......