转自kongzimengsheng
|
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');
相关推荐
博文链接:https://zhibin07.iteye.com/blog/1845536
jQuery+PHP实现实时编辑表格字段内容
jquery php+mysql 表格双击可编辑,表单失去焦点自动提交保存数据,很实用!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
自己要用,编写完整代码,共享给需要的朋友。用到js和php
可编辑的表格:jQuery+PHP+jeditable实现实时编辑表格字段内容,下拉、日历等多种表单演示 使用方法:1、导入数据库文件customer.sql 2、修改数据库链接connect.php
是基于jquery插件:jeditable的使用,实现无刷新修改网页内容的一个功能,并且无需刷新即可即时显示修改结果。
table.php 代码如下: <?php header(“Content-Type:text/html;charset=utf-8”); $mysqli=new MySQLi(“localhost”...可编辑表格</title> <link rel=”stylesheet” type=”text/css” href=”style.css”
这是一个 支持layui树编辑的插件 ,可以用来当做菜单选择 也可以用来 进行树形表格展示,使用起来简单,回显也非常方便。如有不懂还可留言
PHPGRID不仅具有数据添加编辑删除的基本功能,还具有表单自动生成,排序,分页,查询,权限设定,缓存的功能,而且这些功能是可定制的。 对于特殊或则复杂的业务的需求,您只需编写少量的代码来继承于PHPGRID。
在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库;当点击“取消”按钮,则页面恢复到初始...
一、 显示数据(基础功能) 在html页面中定义表格以及表格的...这个系统用的是PHP语言,里边用到了PHP中的语法,如果是Java语言,把php换成jsp中对应的语法就行 序号 <th xss=removed>ActionID <th>Category <
程序员可以容易的添加一个类似Excel功能的,可编辑的表格功能到自己的Web应用中。 [单元格格式化和函数功能] 使用dhtmlxSpreadsheet的单元格格式化功能,用户可以为不同的单元格设置不同的字体颜色,单元格背景,...
内容索引:脚本资源,jQuery,双击编辑,无刷新修改 jQuery做的一个表格效果,双击商品表格,表格单元格变为可编辑状态,配合PHP程序完成编辑动作,同时还可以在弹出的分类菜单中选择表格的数据,这一部分代码是在一个...
使用NTKO Office文档控件,能够在浏览器窗口中直接编辑Word, Excel等Office文档并保存到Web服务器。实现文档和电子表格的统一管理。同时支持强制痕迹保留,手写签名,电子印章等办公自动化系统必备的功能。是OA系统...
datatables增删改查,行内编辑等官方源码实例 冒泡编辑,多行编辑、删除,例子超多,官方的实现代码非常精简,可直接引用 datatables.dll,减少了非常多的页面脚本 带数据库SQL文件 vs2015工程
主要特性包括多文档界面,语法突出,拖拽方式的数据库和表格,可编辑/可增加/删除的域,可编辑/可插入/删除的记录,可显示的成员,可执行的SQL 脚本,提供与外程序接口,保存数据到CSV文件等。 MySQL-Front是MySQL...