Converting from Output to Input !

i want to edit a table but in the same page
when i click on Edit,the output value converts to input to be able to edit it
but i dont know why it didnt work????????
do u think it needs Ajax???
this is my code

<script type="text/javascript">
function setEditable (id) {
  var object = document.getElementById(id);
  var content = object.innerHTML;
  object.innerHTML = '<textarea rows="10" cols="50" onblur="setNonEditable(' + id + ', this)">' + content + '</textarea>';
}

function setNonEditable (div_id, textarea) {
  var object = document.getElementById(div_id);
  object.innerHTML = textarea.value;
}


</script>

<div id="the_div">
<?php 
$conn=mysql_connect("localhost","root","123456");
$db=mysql_select_db("epic");
$Recordset1=mysql_query("select * from porto");
?>

<table border="1" align="center">
  <tr>
    <th>Name</th>
  <?php do { ?>
      <td><input type=text value=<?php echo $row_Recordset1['porto_name']; ?> /></td>
    </tr>
    <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
</table>
</div>
<button type="button" name="edit" onclick="setEditable('the_div')">Edit</button>

PHP:

when i change the update statement to insert it works just fine
but when updating!!!NOOOOoOoOoOooO

please help

 

yeahhhh
one thing here!!
i want it to do exactly the same way when u click on edit here in this page
it converts the output to be editable
can anyone help?

 

there is no update and insert query in this code

Regards

Alex