基于PHP+Jquery制作的可编辑的表格的代码

 更新时间:2011年04月10日 23:55:22   作者:  
基于PHP+Jquery制作的可编辑的表格的代码,需要的朋友可以参考下。
table.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();
?>

相关文章

  • html、css和jquery相结合实现简单的进度条效果实例代码

    html、css和jquery相结合实现简单的进度条效果实例代码

    这篇文章主要介绍了html、css和jquery相结合实现简单的进度条效果的实例代码,这个进度条特别简单,首先html里面的话就是一个div里面嵌套一个div,然后写好想要的样式就行了,具有一定的参考借鉴价值,感兴趣的朋友一起看看吧
    2016-10-10
  • 使用jQuery validate 验证注册表单实例演示

    使用jQuery validate 验证注册表单实例演示

    Validation是jQuery的插件,提供的方法可以大大简化验证表单的工作,接下来为大家详细介绍下使用方法,感兴趣的各位可以参考下哈
    2013-03-03
  • JQuery小知识

    JQuery小知识

    我们通常在执行一次ajax请求过后,需要更新界面上的某些内容,一般通过动态插入dom元素。
    2010-10-10
  • Jquery AJAX POST与GET之间的区别

    Jquery AJAX POST与GET之间的区别

    本文是对Jquery中AJAX POST与GET之间的区别。进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • jQuery 插件仿百度搜索框智能提示(带Value值)

    jQuery 插件仿百度搜索框智能提示(带Value值)

    因公司需要做一个仿百度搜索框,并且带Value值的, 网上找了下只有Text, 都没带Value的 所以做了个,代码给予简单的注释,结构很清晰,很容易看懂,感兴趣的朋友可以了解下
    2013-01-01
  • jQuery序列化表单成对象的简单实现

    jQuery序列化表单成对象的简单实现

    下面小编就为大家带来一篇jQuery序列化表单成对象的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 分享10篇优秀的jQuery幻灯片制作教程及应用案例

    分享10篇优秀的jQuery幻灯片制作教程及应用案例

    jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效果。
    2011-04-04
  • jQuery实现提交表单时不提交隐藏div中input的方法

    jQuery实现提交表单时不提交隐藏div中input的方法

    这篇文章主要介绍了jQuery实现提交表单时不提交隐藏div中input的方法,结合实例形式分析了通过设置input的disabled属性实现隐藏input提交的操作技巧,需要的朋友可以参考下
    2019-10-10
  • jQuery中dom元素上绑定的事件详解

    jQuery中dom元素上绑定的事件详解

    在jquery中绑定事件我们可以使用click、change、mouseout、.bind(),live等待事件来操作,下面我来给大家介绍jQuery使用向DOM元素绑定事件实现程序相关实例,有需要了解的同不可进入参考。
    2015-04-04
  • jQuery的deferred对象使用详解

    jQuery的deferred对象使用详解

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本。每个版本都会引入一些新功能。今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。
    2011-08-08

最新评论