Edit Record In Table Row

ID	Last	First	Account	Credit Limit
1	Davis	John	123-A45	$5,000.00
2	Franklin	Ben	221-B67	$10,000.00
3	Lincoln	Abe	896-A44	$10,000.00
4	Kennedy	John	654-J97	$25,000.00
5	Ford	Jerry	777-P88	$10,000.00
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Roderick Divilbiss">
<meta name="copyright" content="© 2005, 2008 Roderick Divilbiss">
<script type="text/javascript">
<!--
// need this to be global so we can access in multiple functions
var saved = new Array;
var active = '';

function edit(num) {
    // prevent editing two rows at once
    if (active=='') {
        active=num;
    }

    if (num!=active) {
        cancel(active);
    }
    active=num;

    // get the row
    var row = document.getElementById('r'+num);

    // get the cells so we can modify them
    var cells = row.getElementsByTagName('TD');

    // Save the values in case of cancel edit
    for(idx=0;idx<cells.length;idx++) {
        saved[idx]=cells[idx].innerHTML;
    }

    // cell 0 is our button, make it a save button and begin a form
    cells[0].innerHTML = '<input type="submit" size="3" value="Submit" onclick="doSubmit('+num+');"><input type="button" value="Cancel" onclick="cancel('+num+');">';

    // make the other cells editable
    cells[1].innerHTML = '<input type="text" size="10" name="id" value="'+saved[1]+'">';
    cells[2].innerHTML = '<input type="text" size="10" name="lasttname" value="' + saved[2] + '">';
    cells[3].innerHTML = '<input type="text" size="10" name="firstname" value="' + saved[3] + '">';
    cells[4].innerHTML = '<input type="text" size="10" name="account" value="' + saved[4] + '">';
    cells[5].innerHTML = '<input type="text" size="10" name="credit" value="' + saved[5] + '">';
}

function cancel(num) {
    // get the row
    var row = document.getElementById('r'+num);

    // get the cells so we can modify them
    var cells = row.getElementsByTagName('TD');

    // put the edit button back
    cells[0].innerHTML = '<input type="button" value="Edit" onclick="edit('+num+');">'

    // put the cells back to text
    for(idx=1;idx<saved.length;idx++) {
        cells[idx].innerHTML = saved[idx];
    }
}
//-->
</script>
<style>
<!--
td { font-size: 12px; border: 1px solid #000000; padding-top: 2px; padding-bottom: 
2px }
thead { color: #FFFFFF; font-weight: bold; background-color: #808080 }
-->
</style>
</head>

<body>
<form method="post" action="edit-in-place.asp">
<table border="0" style="border-collapse: collapse" width="100%" id="table1">
  <thead>
    <tr>
      <td width="20%">&nbsp;</td>
      <td width="20%">ID</td>
      <td width="20%">Last</td>
      <td width="20%">First</td>
      <td width="20%">Account</td>
      <td width="20%">Credit Limit</td>
    </tr> 
  </thead>
  <tbody>
    <tr id="r1">
      <td width="20%"><input type="button" value="Edit" onclick="edit(1);"></td>
      <td width="20%">1</td>
      <td width="20%">Davis</td>
      <td width="20%">John</td>
      <td width="20%">123-A45</td>
      <td width="20%">$5,000.00</td>
    </tr>
    <tr id="r2">
      <td width="20%"><input type="button" value="Edit" onclick="edit(2);"></td>
      <td width="20%">2</td>
      <td width="20%">Franklin</td>
      <td width="20%">Ben</td>
      <td width="20%">221-B67</td>
      <td width="20%">$10,000.00</td>
    </tr>
    <tr id="r3">
      <td width="20%"><input type="button" value="Edit" onclick="edit(3);"></td>
      <td width="20%">3</td>
      <td width="20%">Lincoln</td>
      <td width="20%">Abe</td>
      <td width="20%">896-A44</td>
      <td width="20%">$10,000.00</td>
    </tr>
    <tr id="r4">
      <td width="20%"><input type="button" value="Edit" onclick="edit(4);"></td>
      <td width="20%">4</td>
      <td width="20%">Kennedy</td>
      <td width="20%">John</td>
      <td width="20%">654-J97</td>
      <td width="20%">$25,000.00</td>
    </tr>
    <tr id="r5">
      <td width="20%"><input type="submit" value="Edit" onclick="edit(5);"></td>
      <td width="20%">5</td>
      <td width="20%">Ford</td>
      <td width="20%">Jerry</td>
      <td width="20%">777-P88</td>
      <td width="20%">$10,000.00</td>
    </tr>
  </tbody> 
</table>
</form>

</body>

</html>
How can you edit record rows inplace?
