php制作600行表格,基于PHP+Jquery制作的可编辑的表格的代码

table.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="select id,name,age,sex,email from users limit 0,20";

$result=$mysqli->query($sql);

echo "

echo "

可编辑表格";

echo "

";

echo "

编号姓名性别年龄邮箱";

echo "

";

while($row=$result->fetch_assoc()){

echo '

';

echo '

'.$row['id']'';

echo '

'.$row['name']'';

echo '

'.$row['age']'';

echo '

'.$row['sex']'';

echo '

'.$row['email']'';

echo '

';

}

echo "

";

$mysqli->close();

?>

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=$('');

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

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();

?>