基于PHP+Jquery制作的可编辑的表格的代码
table.php
style.css
table.js
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; } ?> <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(); ?>
相关推荐
移动开发与培训 2020-08-16
ReunionIsland 2020-08-16
行吟阁 2020-08-09
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
swiftwwj 2020-07-05
pythonclass 2020-06-25
nercon 2020-06-14
玫瑰小妖 2020-06-07
pythonclass 2020-06-03
lyg0 2020-05-28
huzijia 2020-05-08
行吟阁 2020-05-11
黎豆子 2020-05-11
玫瑰小妖 2020-05-11
HSdiana 2020-05-10
黎豆子 2020-05-08