Jquery无刷新实时更新表格数据

本例与《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》差不多的功能，但是本例的更新是一次更新一行数据，具体的请看更新文件table_edit_ajax.php。

数据库当然也是相同的，

演示

 

 

PHP Code

"600" align="center">
class="head">
FirstLast


$sql=mysql_query("select * from add_delete_record");
$i=1;
while($row=mysql_fetch_array($sql))
{
$id=$row['id'];
$content=$row['content'];
$text=$row['text'];

if($i%2)
{
?>
"" class="edit_tr">
else { ?>
"" bgcolor="#f2f2f2" class="edit_tr">

"50%" class="edit_td">
"first_" class="text">echo $content; ?>
"text" value="" class="editbox" id="first_input_" />

"50%" class="edit_td">
"last_" class="text">echo $text; ?>
"text" value=""  class="editbox" id="last_input_"/>




$i++;
}
?>


"center">

主要是js文件

 

JavaScript Code

"text/javascript">
$(document).ready(function()
{
$(".edit_tr").click(function()
{
var ID=$(this).attr('id');
$("#first_"+ID).hide();
$("#last_"+ID).hide();
$("#first_input_"+ID).show();
$("#last_input_"+ID).show();
}).change(function()
{
var ID=$(this).attr('id');
var first=$("#first_input_"+ID).val();
var last=$("#last_input_"+ID).val();
var dataString = 'id='+ ID +'&content='+first+'&text='+last;
$("#first_"+ID).html('');


if(first.length && last.length>0)
{
$.ajax({
type: "POST",
url: "table_edit_ajax.php",
data: dataString,
cache: false,
success: function(html)
{

$("#first_"+ID).html(first);
$("#last_"+ID).html(last);
}
});
}
else
{
alert('不能为空.');
}

});

$(".editbox").mouseup(function()
{
return false
});

$(document).mouseup(function()
{
$(".editbox").hide();
$(".text").show();
});

});

 table_edit_ajax.php

 

PHP Code

include_once('conn.php');
if($_POST['id'])
{
$id=mysql_escape_String($_POST['id']);
$content=mysql_escape_String($_POST['content']);
$text=mysql_escape_String($_POST['text']);
$sql = "update add_delete_record set content='$content',text='$text' where id='$id'";
mysql_query($sql);
}
?>

 

原文地址:http://www.freejs.net/article_biaodan_50.html