display:block in table

**Daved84** · 28-05-2012, 21:42

ciao a tutti!sto impazzendo con Javascript e CSS!!!
Ho una tabella in cui cliccando su una cella si mostra del testo a comparsa con il seguente codice:

codice:

button.onclick = function() {
 for (var x = 0; x < cells.length; x++) {
       if (cells[x].className == "my_cell") {               
               if (cells[x].parentNode.style.display == "none") {
                     button.className = "expanded";
                     cells[x].parentNode.style.display ='';                     
               } else if (cells[x].parentNode.style.display =='') {
                     button.className = "collapsed";
                     cells[x].parentNode.style.display = "none";
               }
        }
}

Ho usato il seguente codice usando degli esempi trovati sui forum in cui dicono che va bene sia per IE che per Firefox...in realtà per Firefox va benissimo mentre per IE funziona, ma il testo che viene mostrato cliccando sul button(cella relativa a riga1 colonna2) va a finire sotto un altra cella(quella a fianco ovvero riga1 colonna1)...avete qualche suggerimento?!ho provato anche con position:absolute ma niente...forse lo metto nel punto sbagliato?!?!

**carlomarx** · 28-05-2012, 22:17

Prova a sostituire display: block con display: table-row (si tratta di una riga <tr>, giusto?)
Dovrai avere l'alternanza display: none/table-row

**Daved84** · 28-05-2012, 22:34

ciao ti ringrazio per il suggerimento, ma non è che quell'istruzione funziona bene su firefox ma non su IE?!?!?

**carlomarx** · 28-05-2012, 22:37

Considera anche la possibilità (ma solo a condizione che il tuo button si trovi prima della tabella e a condizione che sia button che tabella siano figli dello stesso nodo genitore - quindi "fratelli") di usare solo il CSS:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<style type="text/css">
#pulsante {
	margin: 0 3px;
	display: inline-block;
	font: 12px / 13px "Lucida Grande", sans-serif;
	text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
	padding: 3px 6px;
	border: 1px solid rgba(0, 0, 0, 0.6);
	background-color: #969696;
	cursor: default;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
	-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
	box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}

#mostraRighe:checked ~ #pulsante {
	background: #B5B5B5;
	-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
	-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
	box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
}

#mostraRighe, .espandibile {
	display: none;
}

#mostraRighe:checked ~ table tr.espandibile {
	display: table-row;
	color: red;
}
</style>
</head>
<body>
<form name="tuoForm">
<input type="checkbox" name="tuaCheckbox" id="mostraRighe" />
<label for="mostraRighe" id="pulsante">Mostra righe mancanti</label>
<table>
<thead>
<tr><th>Colonna1</th><th>Colonna2</th><th>Colonna3</th></tr>
</thead>
<tbody>
<tr class="espandibile"><td>blabla</td><td>blabla</td><td>blabla</td></tr>
<tr class="statica"><td>blabla</td><td>blabla</td><td>blabla</td></tr>
<tr class="espandibile"><td>blabla</td><td>blabla</td><td>blabla</td></tr>
<tr class="statica"><td>blabla</td><td>blabla</td><td>blabla</td></tr>
<tr class="espandibile"><td>blabla</td><td>blabla</td><td>blabla</td></tr>
</tbody>
</table>
</form>
</body>
</html>

**carlomarx** · 28-05-2012, 22:41

Originariamente inviato da Daved84
ciao ti ringrazio per il suggerimento, ma non è che quell'istruzione funziona bene su firefox ma non su IE?!?!?

No. display: table-row è la norma anche su IE.

**carlomarx** · 28-05-2012, 22:45

Originariamente inviato da carlomarx
ma solo a condizione che il tuo button si trovi prima della tabella e a condizione che sia button che tabella siano figli dello stesso nodo genitore - quindi "fratelli"

Mi correggo. Se risolvi col solo CSS, la checkbox "nascosta" deve stare prima della tabella (ma essendo nascosta non ci sono problemi), mentre la label a forma di button (che è quello che l'utente vede) puoi metterla dove ti pare...:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<style type="text/css">
#pulsante {
	margin: 0 3px;
	display: inline-block;
	font: 12px / 13px "Lucida Grande", sans-serif;
	text-shadow: rgba(255, 255, 255, 0.4) 0 1px;
	padding: 3px 6px;
	border: 1px solid rgba(0, 0, 0, 0.6);
	background-color: #969696;
	cursor: default;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
	-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
	box-shadow: rgba(255, 255, 255, 0.4) 0 1px, inset 0 20px 20px -10px white;
}

#mostraRighe:checked ~ #pulsante {
	background: #B5B5B5;
	-moz-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
	-webkit-box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
	box-shadow: inset rgba(0, 0, 0, 0.4) 0 -5px 12px, inset rgba(0, 0, 0, 1) 0 1px 3px, rgba(255, 255, 255, 0.4) 0 1px;
}

#mostraRighe, .espandibile {
	display: none;
}

#mostraRighe:checked ~ table tr.espandibile {
	display: table-row;
	color: red;
}
</style>
</head>
<body>
<form name="tuoForm">
<input type="checkbox" name="tuaCheckbox" id="mostraRighe" />
<table>
<thead>
<tr><th>Colonna1</th><th>Colonna2</th><th>Colonna3</th></tr>
</thead>
<tbody>
<tr class="espandibile"><td>blabla</td><td>blabla</td><td>blabla</td></tr>
<tr class="statica"><td>blabla</td><td>blabla</td><td>blabla</td></tr>
<tr class="espandibile"><td>blabla</td><td>blabla</td><td>blabla</td></tr>
<tr class="statica"><td>blabla</td><td>blabla</td><td>blabla</td></tr>
<tr class="espandibile"><td>blabla</td><td>blabla</td><td>blabla</td></tr>
</tbody>
</table>
<label for="mostraRighe" id="pulsante">Mostra righe mancanti</label>
</form>
</body>
</html>

**carlomarx** · 28-05-2012, 23:32

Il tuo problema mi ha suggerito una soluzione interessante che ho subito messo su MDN:
https://developer.mozilla.org/En/CSS...boolean_values

**Daved84** · 29-05-2012, 10:30

carlomarx grazie per i suggerimenti e grazie per aver condiviso il tuo codice per il CSS.
Oramai ho intrapreso la strada JS e vorrei finire con quella...l'istruzione display:table-row non funziona su IE6 e IE7... cosa ne pensi se nel codice inserisco un identificatore del browser tipo if(navigator.appName == 'Microsoft Internet Explorer') oppure <![if !IE]> e inserisco display:block per IE e display:table-row per Firefox?!

**carlomarx** · 29-05-2012, 11:50

Se funziona è una buona idea

Discussione: display:block in table

Strumenti discussione

Ricerca discussione

Visualizza

display:block in table

Permessi di invio