The code for a row in an existing table looks like this:
The results can be seen under the specific 51 search display http://www.51bt.cc, combined with xunsearch full-text search technology, you can achieve a millisecond-level data search
<tr>
<td><span class= "catid" >2</span></td>
<td> Company Introduction </td>
<td> internal column </td>
<td><span class= "Listorder" title= "click Modify" >2</span></td>
</tr>
To implement the mouse click to modify the contents of the following ideas:
1, click the column sort column in the number, get the same row of the contents of the first column, that is, column ID
2, hidden column sorting in the number
3. Insert the input box in the column sequence, and display the contents of column sort in the input box, and set the focus
4, modify the contents of input, lose focus when submitting data, using AJAX to the server to pass data method for POST method
5. When submitting the data, the friendly prompt changes ... Or wait for the picture
6, return the success of the information, to display the modified content to remove the input box
The jquery core code that implements this functionality is as follows:
$ ('. Listorder '). Click (function (e) {var catid = $ (this). Parent (). Siblings ("Td:eq (0)"). Text ()://Get ID value var in the first column on the same line Listorder_now_text = $ (this). Text ()//get content in Listorder Save $ (this). Text ("");/set content to empty var list_form = ' <input type= '
Text "value=" ' +listorder_now_text+ ' "size=2 class=" Listorder_input "/>"; $ (this). Parent (). append (List_form);
Insert the input box $ (". Listorder_input"). focus ();
Customize a div hint modify var loading = ' <div id= ' loading ' ></div>";
$ (this). Parent (). append (loading); $ (' #loading '). css ({"Color": "Red", "display": "None"})//define AJAX Global event $ (this). Ajaxstart (function () {$ (' #loading '). Sho
W (); $ (this). Ajaxstop (function () {$ (' #loading '). Remove ();}) $ (". Listorder_input"). blur (function () {var thislist = $ ( This). siblings (); The label that gets the sibling is the Listorder $.post ("ajax.php", {action: "Mod_listorder", Catid:catid, Listorder: $ (this) that needs to be displayed after the modification. attr ("Val UE ")}, function (data, textstatus) {$ (thislist). text (data);}); /end. Post
$ (this). Remove (); })///end function Blur})//End
Function clickajax.php content is simple, here only to do the demo, and did not submit data to the server, the code is as follows:
Sleep (1),//delay run 1 seconds, viewing effect, the actual code does not need
echo $_post[' Listorder '];