Home > Developer > JavaScript
Table. php
Copy codeThe Code is 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 Database". mysqli_connect_error ();
Exit;
}
?>
<Html>
<Head>
<Title> editable table </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> editable table </caption> ";
Echo "<tr> ";
Echo "<th> NO. </th> <th> name </th> <th> gender </th> <th> age </th> <th> email </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
Copy codeThe 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 codeThe 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;
// Retrieve the original content in the table
Var data = $ (this). text ();
// Set the content to null
Certificate (this).html ('');
Var td = $ (this );
// Create a table
Var indium = $ ('<input type = "text"> ');
Indium. val (data );
Inp.css ("background-color", ((this).css ("background-color "));
Inp.css ("border-width", "0px ");
Inp.css ("width", expires (this).css ("width "));
// Put an input form in the table
Indium. appendTo ($ (this ));
// Trigger the focus event after the form is put into the table
Indium. trigger ('focal ');
// Select all content
Indium. trigger ('select ');
// Add the keyboard time
Indium. keydown (function (event ){
Switch (event. keyCode ){
Case 13:
Td.html ($ (this). val ());
// Use Ajax to send data to the server
// Obtain 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 send data to the server
// Obtain 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:
<? 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 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 "failed to save ";
}
$ Mysqli-> close ();
?>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
