|
|
|
 |
|
|
|
|
| |
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} | |
|
|
| Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | Page Loading Message shown during the time your site's page is being loaded.
Categories : HTML, CSS, Java Script | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | Unobtrusive javascript for maintaining scrollable layer state
Categories : DHTML, Java Script, HTML | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | Fancy Quick Access Navigation Link
Categories : Java Script, Navigation, User Interface, DHTML, Beginner Guides | | | Enchancing dd/mm/yyyy forms with unobtrusive javascript
Categories : Java Script, HTML, User Interface, Date Time | | | How to get the Focus (Cursor) into a Form-Element.
Categories : HTML, Java Script | | | Rollover Image link effect using only single image.
Categories : Web Design, HTML, CSS, Beginner Guides | | | PHP Calendar
Categories : PHP, Calendar, Date Time, Java Script, CSS | | | Bookmarklets are simple tools that extend the surf and
search capabilities of Netscape and Explorer web browsers.
Categories : Java Script, HTML, General | | | Changing the Style of form objects using the JavaScript OnClick method.
Categories : Java Script, Form Processing, Beginner Guides, CSS | | | Menu in sliding bar or tree style. Handles frames by using small amount of javascript. Handles external and internal pages. Allows custom code to replace a menu item.
Categories : PHP Classes, PHP, Java Script, DHTML | | | How to make a scrolling Div
Categories : HTML, CSS | |
| |
| |
|
