Home|Sitemap|Contact

How can you open an edit form inside a table?




<!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, 2006 Roderick Divilbiss">
<script type="text/javascript">
<!--
var editFormOpen = -1;

var addresses = new Array();
addresses[0] = ['Brown','James','123 N Any St','Memphis','TN','99999-1111','1-999-555-1111'];
addresses[1] = ['Carter','June','444 S Another St','New London','MD','99999-2222','1-999-555-2222'];
addresses[2] = ['Davis','Sammie','5555 W Vegas Blvd.','Birmingham','AL','99999-3333','1-999-555-3333'];
addresses[3] = ['Ellington','Duke','12354 NW 121 Terr','St. Louis','MO','99999-4444','1-999-555-4444'];
addresses[4] = ['Franks','Tommie','2323 E 43RD Way','Oz','KS','99999-5555','1-999-555-5555'];

function displayTable() {
    for (var idx=0;idx<addresses.length;idx++){
        document.write('<tr><td width="600" colspan="3"><div id="d'+idx+'" style="display:none;">'+idx+'</div></td></tr>');
        document.write('<tr><td width="150"><a href="javascript:void(0);" onclick="showForm('+idx+');">'+addresses[idx][0]+'</a></td><td width="150">'+addresses[idx][2]+'</td><td width="300">&nbsp;</td></tr>');
    }
}

function showForm(dID) {
    var idx = parseInt(dID);
    if (editFormOpen==idx) {
        document.getElementById('d'+idx).innerHTML='&nbsp;';
        document.getElementById('d'+idx).style.display='none';
        editFormOpen=-1;
    } else { 
        if (editFormOpen!=-1) {
            document.getElementById('d'+editFormOpen).innerHTML='&nbsp;';
            document.getElementById('d'+editFormOpen).style.display='none';
        } 
        var HTMLout = '';
        HTMLout += '<fieldset><legend>Edit Record For '+addresses[idx][1]+' '+addresses[idx][0]+'<legend><table border="0" cellpadding="0" width="600" style="border-collapse: collapse">';
        HTMLout += '<tr><td>Last Name: <input type="text" name="last" size="25" value="'+addresses[idx][0]+'">&nbsp; First Name: <input type="text" name="first" size="25" value="'+addresses[idx][1]+'"></td></tr>';
        HTMLout += '<tr><td>Address: <input type="text" name="address" size="50" value="'+addresses[idx][2]+'"></td></tr>';
        HTMLout += '<tr><td>City: <input type="text" name="city" size="30" value="'+addresses[idx][3]+'">&nbsp; State: <input type="text" name="state" size="4" value="'+addresses[idx][4]+'">&nbsp; Zipcode: <input type="text" name="zipcode" size="15" value="'+addresses[idx][5]+'"></td></tr>';
        HTMLout += '<tr><td><input type="submit" value="Save Changes" name="submit">&nbsp;<input type="button" value="Cancel Changes" name="cancel" onclick="showForm('+idx+');"></td></tr>';
        HTMLout += '</table></fieldset>';
        document.getElementById('d'+idx).innerHTML=HTMLout;
        document.getElementById('d'+idx).style.display='inline';
        editFormOpen=idx;
    } 
}
//-->
</script>
<style>
fieldset { padding: 2px; background-color: #ECECEC }
</style>
<title>edit form open inside table</title>
</head>

<body>
<form name="frmEdit" method="post" action="popUpEditInTable.htm">
  <table border="1" cellpadding="0" style="border-collapse: collapse" width="600">
    <script>displayTable();</script>
  </table>
</form>
</body>
</html>