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'>
{{#persone:posizione}}
<div><button onclick='editor({{posizione}})'>cambia</button>:
{{titolo}} {{cognome}} {{nome}}</div>
{{/persone}}
<select value='{{edit.titolo}}'>
<option value=''></option>
<option value='Sig.'>Sig.</option>
<option value='Sig.ra'>Sig.ra</option>
<option value='Dott.'>Dott.</option>
<option value='Dott.ssa'>Dott.ssa</option>
<option value='Spettabile'>Spettabile</option>
</select>
<input placeholder='Cognome' value='{{edit.cognome}}'>
<input placeholder='Nome' value='{{edit.nome}}'>
<button onclick='memorizza()'>memorizza</button>
<button onclick='aggiungi()'>aggiungi</button>
</script>
<script>
if(localStorage.persone==undefined)
localStorage.persone='[]'
var ractive=new Ractive({
el: '#container',
template: '#template',
data: {
persone: JSON.parse(localStorage.persone),
edit: {nome:'',cognome:'',titolo:''},
},
})
var poscor=0
function memorizza(){
var persone=ractive.get('persone')
ractive.set('persone',persone)
localStorage.persone=JSON.stringify(persone)
}
function aggiungi(){
var persona={nome:'',cognome:'',titolo:''}
lista=ractive.get('persone')
lista.push(persona)
ractive.set('persone',lista)
editor(lista.length-1)
}
function editor(posizione){
poscor=posizione
ractive.set('edit',ractive.get('persone')[posizione])
}
editor(ractive.get('persone').length-1)
</script>