Tutorials, Tips and Technology: Php- Table editable dynamic form with edit + selection (select / option) + checkbox.

EditTable.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>Editable Table - by Fabio Pintore </title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="it" />
<meta name="Robots" content="All" />
<meta name="Description" content="Editable Table" />
<meta name="Keywords" content="Tabella Editabile con campi fissi (edit) + selezione (select/option) + checkbox" />
<meta name="Owner" content="Fabio Pintore (f.pintore@tiscali.it)" />
<meta name="Author" content="Fabio Pintore (f.pintore@tiscali.it)" />
<meta name="Copyright" content="Fabio Pintore (f.pintore@tiscali.it)" />
<link rel="stylesheet" href="EditTable.css" />
<script type="text/javascript" src="EditTable.js"></script>
</head>
<body>
<h1>Editable Table</h1>
<form name="FA">
<table cellpadding="0" cellspacing="0" border="0" class="editable" id="editable">
<thead>
<tr>
<th width="200px">Nome</th>
<th width="200px">EMail</th>
<th width="90px">Sesso</th>
<th width="30px">Socio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aldo Rossi</td>
<td>a.rossi@emailserver.it</td>
<td>Maschio</td>
<td>Si</td>
</tr>

<tr>
<td>Maria Verdi</td>
<td>m.verdi@emailserver.it</td>
<td>Femmina</td>
<td>No</td>
</tr>

<tr>
<td>Marco Bianchi</td>
<td>marcobianchi@unaltroemailserver.it</td>
<td>Maschio</td>
<td>Si</td>
</tr>

</tbody>
</table>
<br/>
<br/>
<script type="text/javascript">
var elArray = makeArray();
var editable=new table.editable(elArray);
editable.init();
</script>

<button type="button" onclick="editable.Insert();" name="Insert" value="INSERISCI">
<b>Inserisci</b>
</button>

<button type="reset" onclick="editable.Annulla();">
<b>Annulla</b>
</button>

<button type="button" onclick="editable.Apply();" name="Apply" value="APPLY">
<b>Salva</b>
</button>

</form>
<br/>
<br/>
<a href="http://www.shooney.com/htm/examples/edittable/EditTable.zip">Download this example (Zip File)</a>
</body>
</html>

EditTable.js

******************************************************************************************************************************************************
// Author : Fabio Pintore (f.pintore@tiscali.it)
// Copyright : Fabio Pintore (f.pintore@tiscali.it)
// Date : 18 Giugno 2009
// Descr : Editable Table
// Tabella Editabile con campi fissi (edit) + selezione (select/option) + checkbox
// Note : [ IT IS FREEWARE ] Lo script ט liberamente e gratuitamente scaricabile e migliorabile.
// Mi piacerebbe sapere se vi ט stato di aiuto.
// *******************************************************************************************************************************************************
function oIElText(nameEl){ this.nameEl=nameEl}
oIElText.prototype.Draw = function(val, w0) { return ('<input class="inp" style="width:'+w0+'px" type="text" value="'+val+'" name="'+this.nameEl+'" />'); }
oIElText.prototype.GetValue = function() { return (eval('document.FA.'+this.nameEl+'.value') ); }

function oIElCheck(nameEl){ this.nameEl=nameEl; }
oIElCheck.prototype.Draw = function(val, w0) {
var app='';
if (val=='Si') { app='checked="checked"' }
return ('<input class="inp" type="checkbox" '+app+' value="'+val+'" name="'+this.nameEl+'" />');
}
oIElCheck.prototype.GetValue = function() { return ( eval('document.FA.'+this.nameEl+'.checked') ? 'Si':'No'); }

function oIElComboOpt(dbcode, dbdescr){ this.dbcode=dbcode; this.dbdescr=dbdescr;}
function oIElCombo(nameEl, dbopt){this.nameEl=nameEl; this.dbopt=dbopt; }
oIElCombo.prototype.Draw = function(val, w0) {
var app=''; resHTML='';
resHTML='<select class="inp" style="width:'+w0+'px" name="'+this.nameEl+'" />';
var cb=this.dbopt;
for(var j=1;j<cb.length;j++){
app='';
if (cb[j].dbdescr == val) {app=' selected '}
resHTML+='<option value="'+cb[j].dbcode+'" '+app+' >'+cb[j].dbdescr+'</option>';
}
resHTML+='</select>';
return (resHTML);
}
oIElCombo.prototype.GetValue = function() {
var ret='';
var app=eval('document.FA.'+this.nameEl+'.value');
var cb=this.dbopt;

for(var j=1;j<cb.length;j++){
if (cb[j].dbcode == app) {ret=cb[j].dbdescr;}
}
return (ret);
}

function makeArray(){
var elArray = new Array();
var optArray = new Array();

optArray[1] = new oIElComboOpt('M','Maschio');
optArray[2] = new oIElComboOpt('F','Femmina');

elArray[0]=new oIElText('dbNome');
elArray[1]=new oIElText('dbEMail');
elArray[2]=new oIElCombo('dbSesso', optArray);
elArray[3]=new oIElCheck('dbSocio');

return (elArray);
}

var table=function(){

function editable(elArray){
this.t; this.w;
this.Clik=1; this.savedTX=0;this.savedValue=[];this.savedClassTX='';
this.elArray=elArray; this.Action='';
}

editable.prototype.init=function(){
this.t=document.getElementById('editable'); this.w=this.t.rows[0].cells.length;
for(var i=1;i<this.t.rows.length;i++){ this.t.rows[i].onclick = new Function('editable.doEdit(this)'); }
}

editable.prototype.doEdit=function(tx){
var resHTML=''; w0=0;

if (this.Clik==1){
this.Clik=0; this.Action="UPD"; this.savedTX = tx; this.savedClassTX = tx.className;

tx.className='clik';
tx.onclick='';

for (var i=0;i<this.w;i++){
w0 = tx.cells[i].offsetWidth;
this.savedValue[i]=tx.cells[i].childNodes[0].nodeValue;
resHTML='';
resHTML = this.elArray[i].Draw(this.savedValue[i], w0);
tx.cells[i].innerHTML = resHTML;
}
}else{
if (this.savedTX != tx) { alert ("devi salvare o annullare !") }
}

}

editable.prototype.Annulla=function(){
if (this.Action=="UPD"){
for (var i=0;i<this.w;i++){ this.savedTX.cells[i].innerHTML=this.savedValue[i]; }
this.savedTX.className=this.savedClassTX;
this.savedTX.onclick = new Function('editable.doEdit(this)');
}else {
if (this.Action=="INS") { this.t.deleteRow(-1); }
}
this.Action=""; this.Clik=1;
}

editable.prototype.Apply=function(){
// FUTURE : Validate Field - AjaxRequest - ....
this.TransactOK();
}

editable.prototype.Insert=function(){
var z = Array(); resHTML=''; w0=0;
if (this.Clik==1){
this.Clik=0; this.Action="INS";

var x=this.t.insertRow(-1);
this.savedTX = x; this.savedClassTX=x.className;
x.className='clik';

for (var i=0;i<this.w;i++){
z[i]=x.insertCell(i);
w0 = this.t.rows[0].cells[i].offsetWidth;
resHTML='';
resHTML = this.elArray[i].Draw('', w0);
z[i].innerHTML = resHTML;
}

}else{ alert ("devi salvare o annullare !"); }
}

editable.prototype.TransactOK=function(){
for (var i=0;i<this.savedTX.cells.length;i++){ this.savedTX.cells[i].innerHTML=this.elArray[i].GetValue(); }
this.Clik=1; this.Action=''; this.savedTX.className=this.savedClassTX;
this.savedTX.onclick = new Function('editable.doEdit(this)');
}

return{editable:editable}

}();

EditTable.css

body {font:12px Verdana,Arial}

.editable{border:1px solid #ccc; border-bottom:none}
.editable th {padding:4px 6px 6px; background:#444; color:#fff; text-align:left; color:#ccc}
.editable td {padding:2px 4px 4px; background:#fff; border-bottom:1px solid #ccc}
.editable tr:hover {color:#ff0000;outline-style:solid;}
.editable .clik td {background:#00ff80}

.inp {font:12px Verdana,Arial}

Tutorials, Tips and Technology

Friday, June 26, 2009

Php- Table editable dynamic form with edit + selection (select / option) + checkbox.

No comments:

All Tutorials