Code for editable tables based on PHP Jquery_jquery

table.php

Copy code The code is as follows:

header( "Content-Type:text/html;charset=utf-8");
$mysqli=new MySQLi("localhost","root","123456","xiaoqiangdb");
if(mysqli_connect_errno) {
echo "Failed to connect to database".mysqli_connect_error();
exit;
}
?>








$sql="select id,name,age,sex,email from users limit 0,20";
$result=$mysqli->query($sql);
echo "";
echo "";
echo "";
echo "";
echo "< ;/tr>";
while($row=$result->fetch_assoc()){
echo '';
echo '';
echo '';
echo '< td>'.$row['age']'';
echo '';
echo ' ';
echo '';
}
echo "

Editable table

number	Name	Gender	Age	Email
'.$row['id']'	'.$row['name']'	'.$row['sex']'	'.$row['email']'

";
$mysqli->close();
?>

style.css

Copy code The code is as follows:

@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

Copy code The code is as follows:

// JavaScript Document
$(function(){
$("tr :even").css("background-color","#ffff99");
$("tr td:not(.id)").click(function(){
if($(this ).children('input').length > 0)
return;
//Get the original content in the table
var data=$(this).text();
// Set the content to empty
$(this).html('');
var td=$(this);
//Create a table
var inp=$('');
inp.val(data);
inp.css("background-color",$(this).css("background-color"));
inp.css("border-width","0px");
inp.css("width",$(this).css("width"));
//Put one in the table input form
inp.appendTo($(this));
//The focus event is triggered after the form is placed in the table
inp.trigger('focus');
//Select all content
inp.trigger('select');
//Add keyboard time
inp.keydown(function(event){
switch(event.keyCode){
case 13:
td .html($(this).val());
//Use Ajax to transmit data to the server
//Get all column objects in a row
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());
//Use Ajax to transfer data to the server
//Get all column objects in a row
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

Copy codeThe code is as follows:

header("Content-Type:text/html;charset=utf-8");
$mysqli=new MySQLi("localhost","root"," 123456","xiaoqiangdb");
if(mysqli_connect_errno){
echo "Failed to connect to database".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 "Modification successful";
}else{
echo "Save failed";
}
$mysqli->close();
?>