php可编辑表格

最新推荐文章于 2023-09-25 15:00:41 发布

Time，，

最新推荐文章于 2023-09-25 15:00:41 发布

阅读量574

点赞数

分类专栏： javascript ajax php JQuery 文章标签： php javascript 数据库 ViewUI

本文链接：https://blog.csdn.net/kaka_2014/article/details/84417743

版权

php 同时被 3 个专栏收录

48 篇文章 0 订阅

订阅专栏

javascript

45 篇文章 1 订阅

订阅专栏

JQuery

8 篇文章 0 订阅

订阅专栏

转自kongzimengsheng

编号	姓名	年龄	性别	邮箱
1	kaka	18	Boy	kaka@sina.cn
2	Jerry	17	Girl	Jerry@yahoo.cn

index.php

<?php
header("Content-Type:text/html;charset=utf-8");

$mysqli = mysql_connect("localhost","root","")or die("exit");
mysql_select_db("demo");

?>
<html>
  <head>
   <title>可编辑表格</title>
   <script type="text/javascript" src="jquery-1.4.min.js"></script>
   <style type="text/css">
      body{
        font-size:12px;
        background:#eee;
        text-align:center;
      }
      table{
        width:600px;
        border:1px solid #050;
        border-collapse:collapse;
      }
      tr,td{
        border:1px solid #050;
        width:120px;
      }
   </style>
  </head>
  <body>
     <table>
       <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>邮箱</td>
       </tr>
<?php 
   $sql = "SELECT id,name,age,sex,email from users ";
   $result  = mysql_query($sql)or die(mysql_error());
   while($row = mysql_fetch_array($result)){     
?>       
       <tr>
        <td class="id"><?php echo $row['id']?></td>
        <td><?php echo $row['name']?></td>
        <td><?php echo $row['age']?></td>
        <td><?php echo $row['sex']?></td>
        <td><?php echo $row['email']?></td>
       </tr>
<?php 
   }
   mysql_close($mysqli);
?>   

     </table>
     
<script type="text/javascript" src="jquery-1.4.min.js"></script>
<script type="text/javascript">
    $(function(){
       //奇数行变色
       $("tr:even").css("background-color","#ffff99");
       //不存在id的行加click事件
       $("tr td:not(.id)").click(function(){
           //alert($(this).text());
           if($(this).children('input').length > 0)
               return;
           //取现表格中原有的内容
           var data = $(this).text();
           //将内容设置为空
           $(this).html("");

           //
           //保留编辑表格
           var td =  $(this);
           //创建一个文本输入框
           var input = $("<input type='text' >");
           //将单元格的内容复制到input 文件框中
           input.val(data);
           //input 背景设定
           input.css("background-color",$(this).css("background-color"));
           input.css("border-width","0px");
           input.css("width",$(this).css("width"));
           //在表格中放一个input表单   $(this) 单元格
           input.appendTo($(this));
           //表单放入表格后触发焦点事件
           input.trigger("focus");
           //全选内容
           input.trigger("select");  


           //-----------------------------
           //添加键盘事件
           input.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:a,email:e}
               $.post("save.php",{id:i,name:n,age:a,sex:s,email:e},function(data){
                     alert(data);
                   });
                 });
            });
    });
</script>     
  </body>
</html>

save.php

<?php
header("Content-Type:text/html;charset=utf-8");
$mysqli = mysql_connect("localhost","root","")or die("exit");
mysql_select_db("demo");

$sql = "update users set name = '{$_POST["name"]}' ,age = '{$_POST["age"]}',sex='{$_POST["sex"]}' ,email='{$_POST["email"]}' where id = '{$_POST["id"]}'";
//echo $sql;
$rs = mysql_query($sql);
if($rs){
 echo "修改成功";
}else{
 echo "修改失败";
}
mysql_close($mysqli);

数据表

CREATE DATABASE demo DEFAULT CHARACTER SET UTF8;

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `name` varchar(20) NOT NULL,
  `age` int(11) NOT NULL,
  `sex` varchar(10) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


INSERT INTO `users` VALUES ('1', 'kaka', '18', 'Boy', 'kaka@sina.cn');
INSERT INTO `users` VALUES ('2', 'Jerry', '17', 'Girl', 'Jerry@yahoo.cn');

Time，，

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
php可编辑表格

转自kongzimengsheng编号姓名年龄性别邮箱[email protected]@yahoo.cnindex.php&lt;?phpheader("Content-Type:text/html;charset=utf-8");$mysq...
复制链接

扫一扫