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

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

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

数据库当然也是相同的，

演示

PHP Code

<table width="600" align="center">
<tr class="head">
<th>First</th><th>Last</th>
</tr>
<?php
$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)
{
?>
<tr id="<?php echo $id; ?>" class="edit_tr">
<?php } else { ?>
<tr id="<?php echo $id; ?>" bgcolor="#f2f2f2" class="edit_tr">
<?php } ?>
<td width="50%" class="edit_td">
<span id="first_<?php echo $id; ?>" class="text"><?php echo $content; ?></span>
<input type="text" value="<?php echo $content; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td width="50%" class="edit_td">
<span id="last_<?php echo $id; ?>" class="text"><?php echo $text; ?></span>
<input type="text" value="<?php echo $text; ?>"  class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>
</tr>

<?php
$i++;
}
?>

</table>
<div align="center"><s

主要是js文件

JavaScript Code

<script type="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('<img src="load.gif" />');


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

});
</script>

 table_edit_ajax.php

PHP Code

<?php
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