php+Ajax 例子
PHP
<?php
$action = $_GET[\'action\']; switch ($action) { case \'init_data_list\': init_data_list(); break; case \'add_row\': add_row(); break; case \'del_row\': del_row(); break; case \'edit_row\': edit_row(); break; } // 列表 function init_data_list(){ $data = array(); $query = query_sql(\'select * from `et_data` order by `id` asc\'); while($row = $query->fetch_assoc()){ $data[] = $row; } echo json_encode($data); } //删除 function del_row(){ $dataid = $_POST[\'dataid\']; $sql = "DELETE FROM `et_data` WHERE `id` = " . $dataid; if(query_sql($sql)){ echo "ok"; } else { echo "db error ..."; } } //添加 function add_row(){ $sql = \'INSERT INTO `et_data` ( `c_a`,`c_b`,`c_c`,`c_d`,`c_e`,`c_f`,`c_g`,`c_h`) VALUES(\'; for($i=0; $i<8; $i++){ $sql .= \'\\'\' . $_POST[\'col_\' .$i] . \'\\', \'; } $sql = trim($sql,", "); $sql .= ")"; if($res = query_sql($sql,"SELECT LAST_INSERT_ID() as LD")){ $d = $res->fetch_assoc(); echo $d[\'LD\']; } else { echo "db error ..."; } } //修改 function edit_row(){ $sql = \'UPDATE `et_data` SET \'; $id = $_POST[\'id\']; unset($_POST[\'id\']); for($i = 0 ; $i < 8 ; $i++){ $sql .= \' `c_\' . chr(97+$i) . \'` = \\'\' . $_POST[\'col_\' . $i] . \'\\' , \'; } $sql = trim($sql,", "); $sql .= \' WHERE `id` = \' . $id ; if(query_sql($sql)){ echo "ok"; } else { echo "db error ..."; } } // 初始化数据库 function query_sql(){ $mysqli = new mysqli("127.0.0.1", "root", "root", "etable"); $sqls = func_get_args(); foreach($sqls as $s){ $query = $mysqli->query($s); } $mysqli->close(); return $query; }
JS
$(function(){ var g_table = $(\'table.data\'); var init_data_url = "data.php?action=init_data_list"; $.get(init_data_url, function(data){ var row_items = $.parseJSON(data); for (var i = 0, j = row_items.length; i < j; i++) { var data_dom = create_row(row_items[i]); g_table.append(data_dom); } }); //删除事件 function delHandler(){ if (confirm(\'确定要删除吗？\')) { var data_id = $(this).attr("dataid"); var meButton = $(this); $.post("data.php?action=del_row",{dataid:data_id},function(res){ if("ok" == res) { $(meButton).parent().parent().remove(); } else { alert("删除失败..."); } }); } } //修改事件 function editHandler(){ var data_id = $(this).attr("dataid"); var meButton = $(this); var meRow = $(this).parent().parent();//没有事件 var editRow = $("<tr></tr>"); for (var i = 0; i < 8; i++) { var editTd = $("<td><input class=\'textField\' type=\'text\' /></td>"); var v = meRow.find(\'td:eq(\'+ i +\')\').html(); editTd.find(\'input\').val(v); editRow.append(editTd); } var opt_td = $("<td></td>"); var saveButton = $(\'<a class="opLink" href="javascript:">确认 </a>\'); saveButton.click(function(){ var currentRow = $(this).parent().parent(); var input_fields = currentRow.find("input"); var post_fields = {}; for( var i = 0 , j = input_fields.length; i < j; i++){ post_fields[\'col_\' + i] = input_fields[i].value; } post_fields[\'id\'] = data_id; $.post(\'data.php?action=edit_row\',post_fields,function(res){ if("ok" == res){ var newUpdateRow = create_row(post_fields); currentRow.replaceWith(newUpdateRow); } else { alert("数据更新失败..."); } }); }); var canceButton = $(\'<a class="opLink" href="javascript:"> 取消</a>\'); canceButton.click(function(){ var currentRow = $(this).parent().parent(); meRow.find(\'a:eq(0)\').click(delHandler); meRow.find(\'a:eq(1)\').click(editHandler); currentRow.replaceWith(meRow);//需重新绑定事件 }) opt_td.append(saveButton); opt_td.append(canceButton); editRow.append(opt_td); meRow.replaceWith(editRow); } //列表 function create_row(data_item){ var row_obj = $("<tr></tr>"); for(var k in data_item){ if ("id" != k) { var col_td = $("<td></td>"); col_td.html(data_item[k]); row_obj.append(col_td); } } var delButton = $(\'<a class="opLink" href="javascript:">删除 </a>\'); delButton.attr("dataid", data_item[\'id\']); delButton.click(delHandler); var editButton = $(\'<a class="opLink" href="javascript:">编辑 </a>\'); editButton.attr("dataid", data_item[\'id\']); editButton.click(editHandler); var opt_td = $(\'<td></td>\'); opt_td.append(delButton); opt_td.append(editButton); row_obj.append(opt_td); return row_obj; } // 添加 $("#addBtn").click(function(){ var addRow = $("<tr></tr>"); for (var i = 0; i < 8; i++) { var col_td = $("<td><input type=\'text\' class=\'textField\' /></td>") addRow.append(col_td); } var col_opt = $("<td/></td>"); var confirmBtn = $(\'<a class="opLink" href="javascript:">确认 </a>\'); confirmBtn.click(function(){ var currentRow = $(this).parent().parent(); var input_fields= currentRow.find(\'input\'); var post_fields = {}; for(var i = 0 , j = input_fields.length; i< j ; i++){ post_fields[\'col_\' + i] = input_fields[i].value; } $.post("data.php?action=add_row", post_fields, function(res){ if( 0 < res){ post_fields[\'id\'] = res; var postAddRow = create_row(post_fields); currentRow.replaceWith(postAddRow); } else { alert("插入失败..."); } }) }); var cancelBtn = $(\'<a class="opLink" href="javascript:"> 取消</a>\'); cancelBtn.click(function(){ $(this).parent().parent().remove(); }); col_opt.append(confirmBtn); col_opt.append(cancelBtn); addRow.append(col_opt); g_table.append(addRow); }); });
数据库
grant all privileges on etable.* to \'shaddow\'@\'localhost\' identified by \'123456\'; DROP DATABASE IF EXISTS aetable; create database aetable; use aetable; create table et_data( id int primary key auto_increment, c_a varchar(30), c_b varchar(30), c_c varchar(30), c_d varchar(30), c_e varchar(30), c_f varchar(30), c_g varchar(30), c_h varchar(30) ); LOCK TABLES `et_data` WRITE; /*!40000 ALTER TABLE `et_data` DISABLE KEYS */; INSERT INTO `et_data` VALUES (12,\'my\',\'heart\',\'will\',\'go\',\'on\',\'and\',\'on\',\'forever\'),(13,\'hello\',\'world\',\'are\',\'you\',\'ok\',\'with\',\'your\',\'skill\'),(14,\'when\',\'i\',\'was\',\'young\',\'i\',\'listen\',\'to\',\'the radio\'),(15,\'wait\',\'for\',\'my\',\'faveriate\',\'song\',\'you\',\'like\',\'it\'),(17,\'你\',\'好\',\'吗？\',\'你\',\'真的\',\'好\',\'嘛\',\'确定？\'),(18,\'我\',\'很\',\'好\',\'啊\',\'谢谢\',\'你\',\'吧\',\'非常\'),(19,\'故事\',\'发生\',\'在\',\'1998\',\'年\',\'那时候\',\'我们\',\'都不大\'),(20,\'php\',\'javascript\',\'c\',\'c++\',\'python\',\'golang\',\'c#\',\'java\'); UNLOCK TABLES;