start .
me .
HTML Document File : sheet.html
<!doctype html><title>app-sheet</title><meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ractive/1.3.10/ractive.min.js'></script>
<div id='container'></div>
<script id='template' type='text/ractive'>
<ul>
{{#persone:posizione}}
<li onclick='editor({{posizione}})'>
{{#if posizione!=poscor}}
{{titolo}} {{cognome}} {{nome}} {{email}}
{{else}}
<button onclick="editor(-1);event.stopPropagation()">modifiche finite, chiudi!</button><br>
<select value='{{edit.titolo}}' class='campo'>
{{#titoli}}<option value='{{.}}'>{{.}}</option>{{/titoli}}
</select><br>
<input placeholder='Cognome' value='{{edit.cognome}}' class='campo'><br>
<input placeholder='Nome' value='{{edit.nome}}' class='campo'><br>
<input placeholder='Email' value='{{edit.email}}' class='campo' type='email'><br>
<button onclick='if(!confirm("vuoi proprio cancellare?"))return; rimuovi();event.stopPropagation();'>rimuovi questa voce</button>
{{/if}}
</li>
{{/persone}}
</ul>
<button onclick='aggiungi()'>aggiungi nuova voce</button> <br>
tocca una voce dell'elenco per modificarla
</script>
<script>
if(localStorage.persone==undefined)
localStorage.persone='[]'
var ractive=new Ractive({
el: '#container',
template: '#template',
data: {
poscor:-1,
persone: JSON.parse(localStorage.persone),
edit: {nome:'',cognome:'',titolo:'',email:''},
titoli: ['Titolo','','Sig.','Sig.ra','Dott.','Dott.ssa','Spettabile'],
},
})
function memorizza(){
var persone=ractive.get('persone')
ractive.set('persone',persone)
localStorage.persone=JSON.stringify(persone)
}
function aggiungi(){
var persona={nome:'',cognome:'',titolo:'Titolo'}
lista=ractive.get('persone')
lista.push(persona)
ractive.set('persone',lista)
editor(lista.length-1)
}
function editor(posizione){
ractive.set('poscor',posizione)
ractive.set('edit',ractive.get('persone')[posizione])
document.querySelectorAll('.campo').forEach(function(campo){
campo[campo.tagName=='SELECT'?
'onchange':'oninput']=memorizza})
}
function rimuovi(){
var persone=ractive.get('persone')
persone.splice(ractive.get('poscor'),1)
ractive.set('persone',persone)
localStorage.persone=JSON.stringify(persone)
var pos2=Math.min(ractive.get('poscor'),persone.length-1)
ractive.set('poscor',pos2)
editor(pos2)
}
editor(ractive.get('poscor'))
</script>