HTML code:
<table width= "" 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;?>"/&G T
</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 (' ');
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 (' cannot be empty. ');
}
});
$ (". EditBox"). MouseUp (function ()
{
return False
});
$ (document). MouseUp (function ()
{
$ (". EditBox"). Hide ();
$ (". Text"). Show ();
});
});
</script>
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);
}
?>
jquery No refresh updates tabular data in real time