Migliorare la funzione mostra/nascondi righe multiple

**betto** · 13-06-2011, 11:01

Ciao a Tutti,
nella mia pagina html ho una tabella che contiene righe con contenuto in italiano ..
e righe con contenuto in inglese. ...

Guardando in internet e facendo alcuni aggiustamenti ho creato una funzione "toogle" che, a seconda di quando uno schiaccia il pulsante con bandiera italiana o inglese,
mi screma le righe della tabella e mi fa vedere cosi' il contenuto tutto in italiano o tutto il contenuto in inglese.
Tutto funziona bene !!!

Ho scritto perche' volevo chiedere se si poteva migliorare il codice in quanto il fatto di vedere ripetuta la stessa funzione 2 volte non mi piace ...

Grazie mille in anticipo !!!

<html>
<head>
<script type="text/javascript">
function toggle(name) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(name)){
if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
//
function toggle(nome) {
tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(nome)){
if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
</script>
</head>

<body onload="toggle('name');">
<table>
<tr nome="riga_i">
<td>REQUISITI RELATVI AL SERVIZIO</td>
<td></td>
<td><input type="button" onclick="toggle('nome');toggle('name');" style="background-image: url(../images/flag_uk.jpg); background-color:Transparent;" /></td></tr>
<tr name="row_e">
<td></td>
<td>REQUIREMENTS RELATED TO THE SERVICE</td>
<td><input type="button" onclick="toggle('name');toggle('nome');" style="background-image: url(../images/flag_italy.jpg); background-color:Transparent;" /></td></tr>
....
.... e cosi' via ....
.....
</table></html>

Ho provato un abbellimento in questo modo ma mi da' errore:

<html>
<head>
<script type="text/javascript">
function toggle(this) {
if (this=='nome' || this=='name'){ tr=document.getElementsByTagName('tr')
for (i=0;i<tr.length;i++){
if (tr[i].getAttribute(this)){ if (tr[i].style.display=='none'){tr[i].style.display = '';}
else {tr[i].style.display = 'none';}
}
}
}
}
</script>
</head>

**betto** · 15-06-2011, 08:16

Queste sono le migliorie al codice:

<html>
<head>
<script type="text/javascript">

function toggle(val)

{
//alert('val '+val);
tr=document.getElementsByTagName('tr')

for (i=0;i<tr.length;i++)
{
if (tr[i].getAttribute(val))
{

if (tr[i].style.display=='none')
{
tr[i].style.display = '';
}
else
{
tr[i].style.display = 'none';
}
}
}

}
</script>

</head>

<body onload="toggle('name');">
<table border="1">
<tr nome="riga_i">
<td>REQUISITI RELATVI AL SERVIZIO</td>
<td> </td>
<td><input type="button" onclick="toggle('nome');toggle('name');" style="background-image: url(../images/flag_uk.jpg); background-color:Transparent;" /></td></tr>
<tr name="row_e">
<td> </td>
<td>REQUIREMENTS RELATED TO THE SERVICE</td>
<td><input type="button" onclick="toggle('name');toggle('nome');" style="background-image: url(../images/flag_italy.jpg); background-color:Transparent;" /></td></tr>

</table>
</html>

**TrueLies** · 15-06-2011, 09:49

In linea di massima non ti merita nascondere delle righe di una tavola - piuttosto metti nelle celle dei tag che so DIV e poi switchi quelli.

L'uso che fai della keyword this è errato:
function toggle(this) {
this non si usa nella signature di una funzione, ma solo nella sua invocazione (a meno che non si tratti di pseudo-classi, ma non è questo il caso).

Questa funzione potrebbe fare al caso tuo, ad esempio se assegni ai layer con il contenuto in inglese una class con un name (che so: <div class="ing">Hello</div>) e a quelli con il contenuto in italiano una class con altro name (che so: <div class="ita">Ciao</div>):

Javascript Toggle Layers By Class Names Or Id. Show Some Hide Others Or Reverse

**betto** · 15-06-2011, 09:56

Grazie x la tua soluzione !!!

**TrueLies** · 15-06-2011, 10:39

Ho colto l'occasione per riscrivere la funzione ed eliminare la limitazione che aveva (cioè di operare su un solo layer che incapsula quelli che vuoi switchare).

Adesso, con una sola invocazione della funzione puoi coinvolgere più sezioni della pagina, basta che le sezioni che vuoi coinvolgere siano incapsulate ciascuna da un layer che abbia un id: poi passi questi id alla funzione come array, e te li coinvolge tutti.

A questo modo puoi switchare la visibilità non più su una sezione sola della pagina (quella dove c'era il layer che incapsulava gli elementi da switchare), ma su quante sezioni vuoi: basta che ciascuna di esse sia incapsulata da un layer e che ne passi l'id alla funzione assieme agli altri, dentro una array.

La documentazione che c'è ora dovrebbe essere più chiara - e con un esempio aggiornato.

Discussione: Migliorare la funzione mostra/nascondi righe multiple

Strumenti discussione

Ricerca discussione

Visualizza

Migliorare la funzione mostra/nascondi righe multiple

Permessi di invio