table.php
Copy Code code as follows:
<?php
Header ("Content-type:text/html;charset=utf-8");
$mysqli =new mysqli ("localhost", "root", "123456", "xiaoqiangdb");
if (Mysqli_connect_errno) {
echo "Connection database Failed". Mysqli_connect_error ();
Exit
}
?>
<title> Editable Tables </title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<script src= "Jquery-1.3.2.min.js" ></script>
<script src= "Table.js" ></script>
<body>
<?php
$sql = "Select Id,name,age,sex,email from Users limit 0,20";
$result = $mysqli->query ($sql);
echo "<table>";
echo "<caption> editable table </caption>";
echo "<tr>";
echo "<th> number </th><th> name </th><th> sex </th><th> age </th><th> Mailbox </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>
Style.css
Copy Code code 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 code as follows:
JavaScript Document
$ (function () {
$ ("Tr:even"). CSS ("Background-color", "#ffff99");
$ ("tr Td:not (. id)"). Click (function () {
if ($ (this). Children (' input '). Length > 0)
Return
Take out the contents of the table
var data=$ (this). text ();
Set content to Empty
$ (this). html (');
var td=$ (this);
Create a table
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");
Put an input form in the table
Inp.appendto ($ (this));
Trigger Focus event After form is placed in 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 ());
Using AJAX to pass data to the server
Get all the 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 ());
Using AJAX to pass data to the server
Get all the 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 Code code as follows:
<?php
Header ("Content-type:text/html;charset=utf-8");
$mysqli =new mysqli ("localhost", "root", "123456", "xiaoqiangdb");
if (mysqli_connect_errno) {
echo failed to connect to the 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 "modified successfully";
}else{
Echo "Save Failed";
}
$mysqli->close ();
?>
