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

标签：array   edit   data   return   use   row   sele   string   hid   

html代码：

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

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

PHP代码：

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

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

标签：array   edit   data   return   use   row   sele   string   hid   

原文地址：http://www.cnblogs.com/camilla/p/7571585.html