start .
me .
HTML Document File : sheet-app.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>
<style>.curedit{border: 1px solid black;}</style>
<div id='container'></div>
<script id='template' type='text/ractive'>
{{#persone:posizione}}
<div class="{{posizione==poscor?'curedit':''}}" onclick='editor({{posizione}})'>
rigo: {{titolo}} {{cognome}} {{nome}}
{{#if posizione==poscor}}
<select value='{{edit.titolo}}' style='width:7em;' class='campo'>
{{#titoli}}<option value='{{.}}'>{{.}}</option>{{/titoli}}
</select>
<input placeholder='Cognome' value='{{edit.cognome}}' size='5' class='campo'>
<input placeholder='Nome' value='{{edit.nome}}' size='5' class='campo'>
<button onclick='rimuovi();event.stopPropagation();'>rimuovi</button>
{{/if}}
</div>
{{/persone}}
<button onclick='aggiungi()'>aggiungi</button>
</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:''},
titoli: ['','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:''}
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>