Righe Tabella - nascondere e visualizzarle

[NNGNews]

Salve, sto cercando di scrivere del codice, ma le mie conoscenze sono basilari.
Ho la necessità che tramite un bottone, vengano visualizzate o meno delle righe di un tabella.
Nel dettaglio, appena viene caricata la pagina si vedono tutte e tre le righe, mentra cliccando un bottone la seconda e la terza vengono nascoste.
Funziona tutto, utilizzo delle funzioni Javascript tramite le proprietà display coi valori "block" e "none" riesco a farlo, il problema grosso è che quando le nascondo e poi le ri-visualizzo tutto il testo (contenuto) nella seconda e terza colonna di entrambe le due righe, viene visualizzato tutto nella prima colonna deformando la tabella, ritorna tutto normale se faccio un refresh della pagina.
Il testo è scritto direttamente nella pagina HTML nei tag, non viene caricato.
Dove sbaglio e dove è possibile sistemare sta cosa ?
Grazie

[Vincent.Zeno]

Dove sbaglio e dove è possibile sistemare sta cosa ?

se vuoi una speranza che qualcuno ti dia una mano, è bene che posti il codice o un link ad una pagina di esempio.

[NNGNews]

se vuoi una speranza che qualcuno di dia una mano, è bene che posti il codice o un link ad una pagina di esempio.

OK
Tabella di 3 righe per 3 colonne
<tr

la seconda riga la chiamo (ID) così
<tr id="ShowNews2">
<td valign="top"><h2>.....</h2></td>
<td valign="top">....</td>
<td valign="top">....</td></tr>

la terza riga
<tr id="ShowNews3">
<td valign="top"><h2>.....</h2></td>
<td valign="top">....</td>
<td valign="top">....</td></tr>

i bottoni
<td><button type="submit" id="MoreNews" name="MoreNews" onclick="mostra()"/>SHOW MORE NEWS<button>
<button type="submit" id="LessNews" name="LessNews" onclick="nascondi()"/>SHOW LESS NEWS<button>

le Funzioni


function mostra() {
document.getElementById("ShowNews2").style.display = "block";
document.getElementById("ShowNews3").style.display = "block";

};
function nascondi() {
document.getElementById("ShowNews2").style.display = "none";
document.getElementById("ShowNews3").style.display = "none";

[Vincent.Zeno]

per favore più pulizia e completezza nell'esporre il codice, e inseriscilo nel tag [code][code] (vedi tasto # in modalità avanzata)

[NNGNews]

function mostra() {
document.getElementById("ShowNews2").style.display = "block";
document.getElementById("ShowNews3").style.display = "block";
document.getElementById("MoreNews").style.display = "none";
document.getElementById("LessNews").style.display = "block";
};
function nascondi() {
document.getElementById("ShowNews2").style.display = "none";
document.getElementById("ShowNews3").style.display = "none";
document.getElementById("MoreNews").style.display = "block";
document.getElementById("LessNews").style.display = "none";
};
// Tabella di 3 righe per 3 colonne
<tr>

 // la seconda riga la chiamo (ID) così
< tr id="ShowNews2">
 <td valign="top"><h2>.....</h2></td>
 <td valign="top">....</td>
< td valign="top">....</td>
</tr>

 // la terza riga
< tr id="ShowNews3">
 <td valign="top"><h2>.....</h2></td>
 <td valign="top">....</td>
< td valign="top">....</td>
</tr>

 // i bottoni
< td><button type="submit" id="MoreNews" name="MoreNews" onclick="mostra()"/>SHOW MORE NEWS<button>
  <button type="submit" id="LessNews" name="LessNews" onclick="nascondi()"/>SHOW LESS NEWS<button>

[Vincent.Zeno]

script in head:

<script type="text/javascript">
function mostra() {
document.getElementById("ShowNews2").style.display = "block";
document.getElementById("ShowNews3").style.display = "block";
document.getElementById("MoreNews").style.display = "none";
document.getElementById("LessNews").style.display = "block";
};
function nascondi() {
document.getElementById("ShowNews2").style.display = "none";
document.getElementById("ShowNews3").style.display = "none";
document.getElementById("MoreNews").style.display = "block";
document.getElementById("LessNews").style.display = "none";
};
</script>

html

<table>


<tr id="ShowNews2">
    <td valign="top"><h2>aaaaaaaaaaaaa</h2></td>
    <td valign="top">....</td>
    <td valign="top">....</td>
</tr>




<tr id="ShowNews3">
    <td valign="top"><h2>bbbbbbbbbbbbbb</h2></td>
    <td valign="top">....</td>
    <td valign="top">....</td>
</tr>


<tr>
    <td></td>
    <td></td>
    <td>
        <button type="submit" id="MoreNews" name="MoreNews" style="display:none" onclick="mostra()" >SHOW MORE NEWS</button>
        <button type="submit" id="LessNews" name="LessNews" onclick="nascondi()">SHOW LESS NEWS</button>
    </td>
</tr>


</table>

[NNGNews]

script in head:

<script type="text/javascript">
function mostra() {
document.getElementById("ShowNews2").style.display = "block";
document.getElementById("ShowNews3").style.display = "block";
document.getElementById("MoreNews").style.display = "none";
document.getElementById("LessNews").style.display = "block";
};
function nascondi() {
document.getElementById("ShowNews2").style.display = "none";
document.getElementById("ShowNews3").style.display = "none";
document.getElementById("MoreNews").style.display = "block";
document.getElementById("LessNews").style.display = "none";
};
</script>

html

<table>


<tr id="ShowNews2">
    <td valign="top"><h2>aaaaaaaaaaaaa</h2></td>
    <td valign="top">....</td>
    <td valign="top">....</td>
</tr>




<tr id="ShowNews3">
    <td valign="top"><h2>bbbbbbbbbbbbbb</h2></td>
    <td valign="top">....</td>
    <td valign="top">....</td>
</tr>


<tr>
    <td></td>
    <td></td>
    <td>
        <button type="submit" id="MoreNews" name="MoreNews" style="display:none" onclick="mostra()" >SHOW MORE NEWS</button>
        <button type="submit" id="LessNews" name="LessNews" onclick="nascondi()">SHOW LESS NEWS</button>
    </td>
</tr>


</table>

Ok, sì è quello che ho anch'io ma non funziona, nel senso che una volta (ri)cliccato il tasto MORE NEWS il testo della 2^ e 3^ riga viene messo tutto nella 1^ colonna deformando la tabella

[Vincent.Zeno]

...è quello che ho anch'io...

controlla bene, non è così

il codice è verificato e controllato su 5 browser differenti, e funziona.

[Vincent.Zeno]

ah... no ho capito ora il problema... per vederlo serve il bordo della tabella e delle celle, e un po di contenuti.


usa table-row invece di block per mostrare le righe:
document.getElementById("ShowNews2").style.display = "table-row";

[NNGNews]

ah... no ho capito ora il problema... per vederlo serve il bordo della tabella e delle celle, e un po di contenuti.


usa table-row invece di block per mostrare le righe:
document.getElementById("ShowNews2").style.display = "table-row";

YESSSSS ! Fantastico ! Ora funziona !
Caffè (virtuale ) stamattina offro io
Grazie mille ancora