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

madanling

2013-10-07

本例与《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

padding margin auto font-family jquery