快捷導(dǎo)航

基于PHP+Jquery制作的可編輯的表格的代碼

更新時間：2011年04月10日 23:55:22 作者：

基于PHP+Jquery制作的可編輯的表格的代碼，需要的朋友可以參考下。

table.php

 
<?php 
header("Content-Type:text/html;charset=utf-8"); 
$mysqli=new MySQLi("localhost","root","123456","xiaoqiangdb"); 
if(mysqli_connect_errno){ 
echo "連接數(shù)據(jù)庫失敗".mysqli_connect_error(); 
exit; 
} 
?> 
<html> 
<head> 
<title>可編輯表格</title> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<script src="jquery-1.3.2.min.js"></script> 
<script src="table.js"></script> 
</head> 
<body> 
<?php 
$sql="select id,name,age,sex,email from users limit 0,20"; 
$result=$mysqli->query($sql); 
echo "<table>"; 
echo "<caption>可編輯表格</caption>"; 
echo "<tr>"; 
echo "<th>編號</th><th>姓名</th><th>性別</th><th>年齡</th><th>郵箱</th>"; 
echo "</tr>"; 
while($row=$result->fetch_assoc()){ 
echo '<tr>'; 
echo '<td class="id">'.$row['id']'</td>'; 
echo '<td>'.$row['name']'</td>'; 
echo '<td>'.$row['age']'</td>'; 
echo '<td>'.$row['sex']'</td>'; 
echo '<td>'.$row['email']'</td>'; 
echo '</tr>'; 
} 
echo "</table>"; 
$mysqli->close(); 
?> 
</body> 
</html> 

style.css

復(fù)制代碼代碼如下:

 
@charset "utf-8"; 
/* CSS Document */ 
body{ font-size:12px; background:#EEE; text-align:center;} 
table{ width:600px; border:1px solid #050; border-collapse:collapse;} 
th,td{ border:1px solid #050; width:120px;} 
th{ background:#282; color:white;} 

table.js

復(fù)制代碼代碼如下:

 
// JavaScript Document 
$(function(){ 
$("tr:even").css("background-color","#ffff99"); 
$("tr td:not(.id)").click(function(){ 
if($(this).children('input').length > 0) 
return; 
//取出表格中原有的內(nèi)容 
var data=$(this).text(); 
//將內(nèi)容設(shè)置為空 
$(this).html(''); 
var td=$(this); 
//創(chuàng)建一個表格 
var inp=$('<input type="text">'); 
inp.val(data); 
inp.css("background-color",$(this).css("background-color")); 
inp.css("border-width","0px"); 
inp.css("width",$(this).css("width")); 
//在表格中放一個input表單 
inp.appendTo($(this)); 
//表單放入表格后觸發(fā)焦點事件 
inp.trigger('focus'); 
//全選內(nèi)容 
inp.trigger('select'); 
//添加鍵盤時間 
inp.keydown(function(event){ 
switch(event.keyCode){ 
case 13: 
td.html($(this).val()); 
//利用Ajax將數(shù)據(jù)傳給服務(wù)器 
//獲取一行所有的列對象 
var tds=td.parent("tr").children("td"); 
var i=tds.eq(0).text(); 
var n=tds.eq(1).text(); 
var a=tds.eq(2).text(); 
var s=tds.eq(3).text(); 
var e=tds.eq(4).text(); 
//var user={id:i,name:n,age:a,sex:s,email:e} 
$.post("save.php",{id:i,name:n,age:a,sex:s,email:e},function(data){ 
alert(data); 
}); 
break; 
case 27: 
td.html(data); 
break; 
} 
}).blur(function(){ 
td.html($(this).val()); 
//利用Ajax將數(shù)據(jù)傳給服務(wù)器 
//獲取一行所有的列對象 
var tds=td.parent("tr").children("td"); 
var i=tds.eq(0).text(); 
var n=tds.eq(1).text(); 
var a=tds.eq(2).text(); 
var s=tds.eq(3).text(); 
var e=tds.eq(4).text(); 
//var user={id:i,name:n,age:a,sex:s,email:e} 
$.post("save.php",{id:i,name:n,age:a,sex:s,email:e},function(data){ 
alert(data); 
}); 
}); 
}); 
}); 

save.php

復(fù)制代碼代碼如下:

 
<?php 
header("Content-Type:text/html;charset=utf-8"); 
$mysqli=new MySQLi("localhost","root","123456","xiaoqiangdb"); 
if(mysqli_connect_errno){ 
echo "連接數(shù)據(jù)庫失敗".mysqli_connect_error(); 
exit; 
} 
$sql="update users set name='{$_POST["name"]}',age='{$_POST["age"]}',sex='{$_POST["sex"]}',email='{$_POST["email"]}' where id='{$_POST["id"]}'"; 
$result=$mysqli->query($sql); 
if($result){ 
echo "修改成功"; 
}else{ 
echo "保存失敗"; 
} 
$mysqli->close(); 
?> 