1、index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可編輯表格DEMO</title>
<link rel="stylesheet" href="main.css" >
</head>
<body>
<div class="container">
<table class="data">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td style="width:240px;">
<a id="addBtn" class="optLink" href="javascript:;"/>添加</a>
</td>
</tr>
</table>
</div>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript" src="table.js"> </script>
</body>
</html>
2、main.css
body{
background-color:#899BA5;
}
.container {
width:960px;
margin:80px auto;
}
td {
font-size:20px;
width:120px;
height:40px;
text-align:center;
color:black;
cursor:pointer;
background-color:white;
}
td:hover{
background-color:#aaaacc;
}
input.txtField{
width:90px;
height:30px;
}
.optLink{
text-decoration:none;
color:#f46948;
}
.optLink:hover{
color:#cc0033;
}3、table.js
$(function() {
var g_table=$("table.data");
var url = "table_data.php?action=init_data_list"
$.get(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(){
var data_id=$(this).attr("dataid");
var meButton=$(this);
$.post("table_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 type='text' class='txtField' /></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 href='javascript:;' class='optLink'>保存 </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("table_data.php?action=edit_row",post_fields,function(res){
if(res=='ok'){
var updateRow=create_row(post_fields);
currentRow.replaceWith(updateRow);
}else{
alert("數據更新失敗");
}
});
});
var cancelButton=$("<a href='javascript:;' class='optLink'>取消</a>");
cancelButton.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(cancelButton);
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 href='javascript:;' class='optLink'>刪除 </a>");
delButton.attr("dataid",data_item['id']);
delButton.click(delHandler);
var editButton=$("<a href='javascript:;' class='optLink'>編輯</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 class='txtField' type='text' value='' /></td>");
addRow.append(col_td);
}
var col_opt=$("<td></td>");
var confirmBtn=$("<a href='javascript:;' class='optLink'>確認 </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("table_data.php?action=add_row",post_fields,function(res){
if(res>0){
post_fields['id']=res;
var postAddRow=create_row(post_fields);
currentRow.replaceWith(postAddRow);
}else{
alert("插入失敗");
}
});
});
var cancelBtn=$("<a href='javascript:;' class='optLink'>取消</a>");
cancelBtn.click(function(){
$(this).parent().parent().remove();
});
col_opt.append(confirmBtn);
col_opt.append(cancelBtn);
addRow.append(col_opt);
g_table.append(addRow);
});
});
<?php
header ( "Content-type:text/html;charset=utf-8" );
$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(){
$sql="select * from `et_data`";
$query=query_sql($sql);
while($row = $query->fetch_assoc()){
$data[] = $row;
}
//var_dump($data);
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 "error...";
}
}
function add_row(){
if(empty($_POST)){
echo "METHOD NOT ALLOWED >>>> ";
}
$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 .= "'" . addslashes($_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 "error...";
}
}
function edit_row(){
if(empty($_POST)){
echo "METHOD NOT ALLOWED >>>> ";
}
$id=$_POST['id'];
unset($_POST['id']);
$sql = "update `et_data` set ";
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 "error...";
}
}
function query_sql(){
$mysqli = new mysqli("localhost", "root", "root", "etable");
$mysqli->query("set names utf8");
$sqls = func_get_args();
foreach($sqls as $s){
$query = $mysqli->query($s);
}
$mysqli->close();
return $query;
}