The following small series will introduce you to the implementation of clicking a table cell to achieve the input content and save the data to the database, the reason is that the click is to set the table content to pass to an input, when we leave, we can use ajax to post data to the database.
An editable table indicates that after you click on a cell, the data in the cell can be edited. After you press enter, you can save the data through ajax to make it easy to edit.
Principle: After you click a cell, replace the content of the cell with an input tag. After you press enter after editing, you can use ajax to send the edited content to the server, replace the cell content with the edited content.
Html code:
| The Code is as follows: |
Copy code |
<Table width = "622" border = "1" cellspacing = "0" cellpadding = "0">
<Tr>
<Td width = "129"> song name </td>
<Td width = "127"> artist </td>
<Td width = "152"> sort </td>
<Td width = "165"> Delete </td>
</Tr>
<Tr id = "content" musicId = "2">
<Td> those years </td>
<Td> Hu xiff </td>
<Td> 1 </td>
<Td> <button class = "del"> Delete </button> </td>
</Tr>
</Table> |
My. js:
| The Code is as follows: |
Copy code |
$ (Function (){
$ ("# Content td"). click (function (){
// Run the following command when the td sub-element with the id of content is clicked.
Var musicId = $ (this). parent (). attr ("musicId ");
// Read musicId
Var td = $ (this );
If (td. children ("input "). length> 0) | td. index () = 3) {// if it is already input, or if it is deleted, no operation is performed.
Return;
}
Var input = $ ("<input type = 'text'> ");
// Define an input tag
Var text = td.html ();
// Save the original value
Td.html ("");
// Clear
Input.val(text).css ("border", "none" 2.16.width(td.width())).css ("font-size", "16px"). appendTo (td );
// Set the default value to the original value. It has no border and the same width as td. The font size is 16 PX and is added to td.
Input. trigger ("focus"). trigger ("select ");
// Obtain the focus and select
Var argName = "";
Switch (td. index ()){
// The index method returns the number of columns in the current vertex.
Case 0:
ArgName = "musicName ";
Break;
Case 1:
ArgName = "singer ";
Break;
Case 2:
ArgName = "sort ";
}
// Determine the parameter name based on the column of the vertex
Input. keyup (function (event ){
Var keycode = event. which;
// Take the key value, press enter to 13, and esc to 27
If (keycode = 27 ){
Td.html (text );
// Set the original value
}
If (keycode = 13 ){
Var newValue = $ (this). val ();
// Retrieve the edited Value
If (td. index () = 2 ){
If (! IsInteger (newValue )){
Alert ("Sorting must be an integer ");
$ (This). val (text );
Return false;
}
}
Td.html (newValue );
Var arg = {};
Arg [argName] = newValue;
Arg ['musicid'] = musicId;
$. Post ("edit_ajax.php", arg );
// Ajax sends an update command
}
});
});
$ ("Button. del"). click (function (){
// Execute when clicking a button whose class is del
Var musicId = $ (this). parent (). parent (). attr ("musicId ");
$ (This). parent (). parent (). remove ();
// Remove this row
Var arg = {};
Arg ["action"] = "del ";
Arg ['musicid'] = musicId;
$. Post ("edit_ajax.php", arg );
// Ajax sends the deletion command
});
});
Function isInteger (str ){
// Judge whether it is an integer
Var regu =/^ [-] {0, 1} [0-9] {1,} $ /;
Return regu. test (str );
} |
Edit_ajax.php
This ajax file is the data submitted by php to accept ajax. This file is not described in the same way as other php submits data.
