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=; $i<; $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 = ; $i < ; $i++){
$sql .= ' `c_' . chr(+$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 '';
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,'故事','发生','在','','年','那时候','我们','都不大'),(20,'php','javascript','c','c++','python','golang','c#','java');
UNLOCK TABLES;