Buonasera, premetto che ho un po' di dimestichezza con html e css, non sono autonoma ma riesco a capirlo e reinterpretarlo, ma non so quasi nulla di javascript.
Ho necessità di creare un mio modulo per poter gestire alcune informazioni e creazioni di contenuti, che nel tempo potrenno ritornarmi utili (unità didattiche di apprendimento, insegno alla primaria).
Sono riuscita a compilare la prima parte del modulo, ma ora sono ferma sulla seconda parte del modulo.
Vorrei creare una tabella dove nella prima cella delle righe inserirei il macro-argomento e nelle successive celle della riga di riferimento vorrei che in una textarea comparissero le oprzoni che ho già preimpostato e corrispondenti alla prima cella.
Ho trovato una cosa simile online però agiscono tramite form e mettendole in tabella non funzionano.
Posto il codice che ho trovato e sotto ci sarà l'impostazione grafica di quello che serve a me.
Vi ringrazio in anticipo per l'eventuale aiuto!
Ho ancora molto da imparare e spero di riuscire a gestire l'eventuale codice che mi suggerirete.
Ho necessità di creare un mio modulo per poter gestire alcune informazioni e creazioni di contenuti, che nel tempo potrenno ritornarmi utili (unità didattiche di apprendimento, insegno alla primaria).
Sono riuscita a compilare la prima parte del modulo, ma ora sono ferma sulla seconda parte del modulo.
Vorrei creare una tabella dove nella prima cella delle righe inserirei il macro-argomento e nelle successive celle della riga di riferimento vorrei che in una textarea comparissero le oprzoni che ho già preimpostato e corrispondenti alla prima cella.
Ho trovato una cosa simile online però agiscono tramite form e mettendole in tabella non funzionano.
Posto il codice che ho trovato e sotto ci sarà l'impostazione grafica di quello che serve a me.
Vi ringrazio in anticipo per l'eventuale aiuto!
Ho ancora molto da imparare e spero di riuscire a gestire l'eventuale codice che mi suggerirete.
Codice:
<html>
<head>
<title>Prova valutazione UDA</title>
<style>
table.tabella{
border: 2px solid #CCCCCC;
}
table.tabella td{
background-color : #FAEBD7;
color : back;
padding : 2px;
text-align: center;
font-size: 14px;
}
table.tabella tr{
background-color : white;
color : back;
padding : 2px;
text-align: center;
font-size: 14px;
}
</style>
<script language="javascript">
/* Questo codice l'ho preso online, vorrei funzionasse in maniera simile nella mia tabella*/
/*Questa funzione legge il valore passato come parametro e dato il valore aggiunge delle opzioni agli altri campi*/
function selezionaOpzioni(scelta) {
/*Resetto le opzioni precedenti del campo*/
var campo_der = document.form.campo_der;
campo_der.options.length = 0;
/*verifico la scelta e aggiungo i campi*/
if (scelta == "1") {
campo_der.options[campo_der.options.length] = new Option('Pomodoro');
campo_der.options[campo_der.options.length] = new Option('Mozzarella');
campo_der.options[campo_der.options.length] = new Option('Basilico');
}
if (scelta == "2") {
campo_der.options[campo_der.options.length] = new Option('Pomodoro');
campo_der.options[campo_der.options.length] = new Option('Aglio');
campo_der.options[campo_der.options.length] = new Option('Origano');
}
if (scelta == "3") {
campo_der.options[campo_der.options.length] = new Option('Pomodoro');
campo_der.options[campo_der.options.length] = new Option('Funghi');
campo_der.options[campo_der.options.length] = new Option('Olive');
campo_der.options[campo_der.options.length] = new Option('Carciofini');
}
}
function aggiornaOpzioni(scelta){
var selezionato = document.form.campo_principale.selectedIndex;
var campo = document.form.campo_principale.options;
selezionaOpzioni(campo[selezionato].value);
}
</script>
</head>
<body>
<form name="form">
Seleziona Pizza:
<select name="campo_principale" size="1" onChange="aggiornaOpzioni();">
<option value="1">Pizza Margherita</option>
<option value="2">Pizza Marinara</option>
<option value="3">Pizza Capricciosa</option>
</select>
<br />
<br />
Seleziona Ingrediente:
<select name="campo_der" size="1">
</select>
</form>
<div style=" text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;">
<table width="100%" border="1" cellpadding="1" cellspacing="1" class="tabella">
<tr class="tabella">
<td class="tabella">
<span style=" font-size: 10pt; font-family: 'Arial', 'Helvetica', sans-serif; font-style: normal;">MACRO-AREA</span>
</td>
<td class="tabella">
<span style=" font-size: 10pt; font-family: 'Arial', 'Helvetica', sans-serif; font-style: normal;">LIVELLO 4</span>
</td>
<td class="tabella">
<span style=" font-size: 10pt; font-family: 'Arial', 'Helvetica', sans-serif; font-style: normal;">LIVELLO 3</span>
</td>
<td class="tabella">
<span style=" font-size: 10pt; font-family: 'Arial', 'Helvetica', sans-serif; font-style: normal;">LIVELLO 2</span>
</td>
<td class="tabella">
<span style=" font-size: 10pt; font-family: 'Arial', 'Helvetica', sans-serif; font-style: normal;">LIVELLO 1</span>
</td>
</tr>
<tr class="tabella">
<td class="tabella">
<select name="campo_principale" size="1" onChange="aggiornaOpzioni();">
<option value="1">Scrittura</option>
<option value="2">Lettura</option>
<option value="3">Contenuto</option>
</select>
</td>
<td class="tabella">
<textarea name="campo_der" rows="5" cols="" ></textarea>
</td>
<td class="tabella">
<textarea name="" rows="5" cols="" ></textarea>
</td>
<td class="tabella">
<textarea name="" rows="5" cols="" ></textarea>
</td>
<td class="tabella">
<textarea name="" rows="5" cols="" ></textarea>
</td>
</tr>
</table>
</div>
</body>
</html>
