基於PHP+Jquery製作的可編輯的表格的代碼

最後更新：2013-10-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

table.php
複製代碼代碼如下:
<?php
header("Content-Type:text/html;charset=utf-8");
$mysqli=new MySQLi("localhost","root","123456","xiaoqiangdb");
if(mysqli_connect_errno){
echo "串連資料庫失敗".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
複製代碼代碼如下:
@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
複製代碼代碼如下:
// JavaScript Document
$(function(){
$("tr:even").css("background-color","#ffff99");
$("tr td:not(.id)").click(function(){
if($(this).children('input').length > 0)
return;
//取出表格中原有的內容
var data=$(this).text();
//將內容設定為空白
$(this).html('');
var td=$(this);
//建立一個表格
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));
//表單放入表格後觸發焦時間點事件
inp.trigger('focus');
//全選內容
inp.trigger('select');
//添加鍵盤時間
inp.keydown(function(event){
switch(event.keyCode){
case 13:
td.html($(this).val());
//利用Ajax將資料傳給伺服器
//擷取一行所有的列對象
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將資料傳給伺服器
//擷取一行所有的列對象
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
複製代碼代碼如下:
<?php
header("Content-Type:text/html;charset=utf-8");
$mysqli=new MySQLi("localhost","root","123456","xiaoqiangdb");
if(mysqli_connect_errno){
echo "串連資料庫失敗".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();
?>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More