Real-time table Editing Using Ajax and real-time ajax tables
If we can operate all the data in a table on this page, it would be cool to use it )!
You can use Ajax to implement this function. I will post the demo I wrote below. Haha. I'm used to the TP framework (3.2.
The first part is the HTML code:
######################################## #############################
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> real-time AJAX editing </title>
<Script src = "_ PUBLIC _/jquery-1.7.2.min.js"> </script>
</Head>
<Body>
<Center>
<Table border = "1" width = "1000" id = "g_table">
<Tr>
<! -- <Th> ID </th> -->
<Th> TAB1 </th>
<Th> TAB2 </th>
<Th> TAB3 </th>
<Th> TAB4 </th>
<Th> <span onclick = "add ()"> add </span> </th>
</Tr>
<Foreach name = "tablist" item = "vv">
<Tr>
<! -- <Td >{$ vv. id} </td> -->
<Input type = "hidden" name = "id" value = "{$ vv. id}">
<Td >{$ vv. tab1} </td>
<Td >{$ vv. tab2} </td>
<Td >{$ vv. tab3} </td>
<Td >{$ vv. tab4} </td>
<Td> <span onclick = "del (this)" id = "del"> Delete </span> <span onclick = "edit (this) "id =" edit "> modify </span> </td>
</Tr>
</Foreach>
</Table>
</Center>
</Body>
<Script>
Var g_table = $ ("# g_table ");
Function add (){
Var addRow = $ ("<tr> </tr> ");
G_table.append (addRow );
For (var I = 0; I <4; I ++ ){
Var col_td = $ ("<td> <input type = 'text'/> </td> ");
AddRow. append (col_td );
}
Var col_opt = $ ("<td> </td> ");
Var confirmBtn = $ ("<a href = 'javascript:; '> OK </a> ");
Var cancelBtn = $ ("<a href = 'javascript:; '> cancel </a> ");
CancelBtn. click (function (){
Window. location. reload ();
});
ConfirmBtn. click (function (){
Var currentRow = $ (this). parent (). parent ();
Var input_files = currentRow. find ("input ");
Var post_files = {};
For (var I = 0, j = input_files.length; I <j; I ++ ){
Post_files ['clo _ '+ I] = input_files [I]. value;
}
// $. Post ("{: U ('ajax/add')}", post_files, function (msg ){
// Debugger;
//})
$. Ajax ({
Type: 'post ',
Url: "{: U ('ajax/add ')}",
Data: {post_files },
Success: function (msg ){
Alert (msg );
Window. location. reload ();
}
})
});
Col_opt.append (confirmBtn );
Col_opt.append (cancelBtn );
AddRow. append (col_opt );
}
Function del (obj ){
Var id = $ (obj). parent (). prev (). val ();
$. Ajax ({
Type: 'post ',
Url: "{: U ('ajax/del ')}",
Data: {id: id },
Success: function (msg ){
Alert (msg );
}
})
$ (Obj). parent (). parent (). remove ();
}
Function edit (obj ){
Var id = $ (obj). parent (). prev (). val ();
For (var I = 1; I <5; I ++ ){
Var temp = "<td> <input type = 'text' value = '" + response (obj).parent().parent().children().eq(i2.16.html () + "'/> </td> ";
$ (Obj). parent (). parent (). children (). eq (I). replaceWith (temp );
}
Var confirmBtn1 = $ ("<span id = 'Confirm'> OK </span> ");
Var cancelBtn1 = $ ("<span onclick = 'back () '> cancel </span> ");
ConfirmBtn1.click (function (){
Var currentRow = $ (this). parent (). parent ();
Var input_files = currentRow. find ("input ");
Var post_files = {};
For (var I = 0, j = input_files.length; I <j; I ++ ){
Post_files ['clo _ '+ I] = input_files [I]. value;
}
$. Ajax ({
Type: 'post ',
Url: "{: U ('ajax/edit ')}",
Data: {post_files: post_files, id: id },
Success: function (msg ){
Alert (msg );
Window. location. reload ();
}
})
});
$ (Obj). prev (). replaceWith (confirmBtn1 );
$ (Obj). replaceWith (cancelBtn1 );
}
Function back (){
Location. reload ();
}
</Script>
</Html>
######################################## #############################
The following is the code in the controller:
<? Php
Namespace Home \ Controller;
Use Think \ Controller;
Class AjaxController extends Controller {
Public function index (){
$ Tab = M ('table ');
$ Tablist = $ tab-> select ();
$ This-> assign ('tablist', $ tablist );
$ This-> display ();
}
Public function del (){
$ Map ['id'] = $ _ POST ['id'];
$ Tab = M ('table ');
$ Info = $ tab-> where ($ map)-> delete ();
If ($ info ){
$ This-> ajaxReturn ("deleted successfully ");
} Else {
$ This-> ajaxReturn ("deletion failed ");
}
}
Public function add (){
$ Map ['tab1'] = $ _ POST ['Post _ files'] ['clo _ 0'];
$ Map ['tab2'] = $ _ POST ['Post _ files'] ['clo _ 1'];
$ Map ['tab3'] = $ _ POST ['Post _ files'] ['clo _ 2'];
$ Map ['tab4'] = $ _ POST ['Post _ files'] ['clo _ 3'];
$ Tab = M ('table ');
$ Res = $ tab-> add ($ map );
If ($ res ){
$ This-> ajaxReturn ("added successfully ");
} Else {
$ This-> ajaxReturn ("failed to add ");
}
}
Public function edit (){
$ Id = $ _ POST ['id'];
$ Map ['tab1'] = $ _ POST ['Post _ files'] ['clo _ 1'];
$ Map ['tab2'] = $ _ POST ['Post _ files'] ['clo _ 2'];
$ Map ['tab3'] = $ _ POST ['Post _ files'] ['clo _ 3'];
$ Map ['tab4'] = $ _ POST ['Post _ files'] ['clo _ 4'];
// Dump ($ map); exit;
$ Tab = M ('table ');
$ Res = $ tab-> where ('Id = '. $ id)-> save ($ map );
If ($ res ){
$ This-> ajaxReturn ("updated successfully ");
} Else {
$ This-> ajaxReturn ("update failed ");
}
}
}
######################################## #############################
I will not post the database to create a table. I will build the database as soon as I want to build it. (you can be happy)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
