funzione javascript espandi e riduci per una tabella con ciclo while Php

[gianluis]

ciao a tutti,
ho un problema con una tabella html settata con un ciclo while php in modo tale che si possano visualizzare tante tabelle quante sono le righe nella tabella del database da cui prelevo i dati secondo una certa query.

riassumendo: con il ciclo while php visualizzo tante tabelle html quante sono le righe nella tabella del database.

la mia tabella html contiene due pulsanti, espandi e riduci, passati con un codicino javascript. La loro funzione mi aiuta ad espandere o ridurre il tbody della tabella (o delle tabelle in base, come detto, alle righe presenti nella tabella del database).

il problema � che se espando o riduco, in automatico si espandono e riducono tutte le tabelle presenti. io vorrei che l'operazione venisse fatta sulla singola tabella. ovvero, poter espandere e ridurre a piacimento, senza che l'azione influenzi tutte le tabelle presenti.

pertanto vi chiedo: il problema � a livello di php o di javascript?

ho provato a riscrivere il codice php, ma modificandolo, ovviamente perdo la corretta impaginazione della tabella html.

ecco la tabella html

ciclo while php {

<table id="mytable">
<thead>

<tr>
<td>Oggetti</td>
<td>Prezzo</td>
<td>Disponibilit�</td>
<td><a class="expand" href="#"><button type="button">espandi</button></td>
</tr>

<tr>
<td>Variabili php che prelevano i dati dalla tabella... </td>
<td>Variabili...</td>
<td>Variabili...</td>
<td><td><a class="collapse" href="#"><button type="button">riduci</button></td>
</tr>

</thead> 

<tbody>
<tr><td>altre info che vorrei venissero mostrate o nascoste... </td></tr>
</tbody>

</table>

} fine ciclo while

mentre il codice javascript:

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
  <style type="text/css">
    
  </style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type='text/javascript'>//<![CDATA[
 $(document).ready(function () {
        $(".expand").click(function () {
            $("#mytable tbody").show("slow");
        });
        $(".collapse").click(function () {
            $("#mytable tbody").hide("fast");
        });
    });


</script>

qualcuno riesce a risolvere l'arcano mistero?? grazie mille in anticipo...

[autsel]

Il problema è sia in php che in javascript.

Innanzitutto è decisamente errato assegnare un id alla tabella in quel modo perché avresti tante tabelle con lo stesso id ed una delle regole principali sull'assegnazione degli id è che NON ci devono essere duplicati, per cui devi assegnare id diversi ad ogni tabella.
Lo puoi fare con un contatore php, incrementandolo ongli cliclo per assegnare id diversi

esempio :

print '<table id="mytable'.$contatore.' ">'; 

Le tabelle avranno perciò id differenti: mytable0, mytable1, mytable2 ecc....

In secondo luogo, non puoi chiamare semplicemente una funzione espandi() di javascript, ma dovrai chiamare espandi(0), espandi(1).... eccc....
Lo puoi fare sempre nel ciclo php utilizzando il medesimo contatore.

Nella funzione

function espandi(id) { }

utilizzerai l'id per selezionare l'elemento che ti serve.

Ciao

[gianluis]

Il problema è sia in php che in javascript.

Innanzitutto è decisamente errato assegnare un id alla tabella in quel modo perché avresti tante tabelle con lo stesso id ed una delle regole principali sull'assegnazione degli id è che NON ci devono essere duplicati, per cui devi assegnare id diversi ad ogni tabella.
Lo puoi fare con un contatore php, incrementandolo ongli cliclo per assegnare id diversi

esempio :

print '<table id="mytable'.$contatore.' ">'; 

Le tabelle avranno perciò id differenti: mytable0, mytable1, mytable2 ecc....

In secondo luogo, non puoi chiamare semplicemente una funzione espandi() di javascript, ma dovrai chiamare espandi(0), espandi(1).... eccc....
Lo puoi fare sempre nel ciclo php utilizzando il medesimo contatore.

Nella funzione

function espandi(id) { }

utilizzerai l'id per selezionare l'elemento che ti serve.

Ciao

ciao autsel, grazie mille per l'aiuto.
a livello logico ho capito il ragionamento, l'id contiene una variabile che viene abbinata ad un ciclo. richiamando quell'id, javascript mi permette di interagire sulla singola tabella.

purtroppo però a livello di codice non sto facendo progressi, anzi!

iniziamo dallo script javascript. se ho capito bene devo richiamare l'id in questo modo:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type='text/javascript'>//<![CDATA[
 $(document).ready(function (id) {
        $(".expand").click(function (id) {
            $("#mytable tbody").show("slow");
        });
        $(".collapse").click(function (id) {
            $("#mytable tbody").hide("fast");
        });
    });


</script>

non dovrei anche richiamare mytable in

$("#mytable tbody").show("slow");

?

perché se imposto che

print '<table id="mytable'.$contatore.' ">'; 

allora dovrei reimpostare

$("#mytable tbody").show("slow");

sicuramente mi sbaglio, perché dai test non riesco a farlo funzionare...

[autsel]

Se le tabelle hanno l'id mytable0, mytable1 eccc.... anche nella funzione devi richiamare gli stessi id
però non sono espertissimo di jquery....

Ti posto un esempio modificando l'href, questo funziona di sicuro ma non so darti indicazioni esatte su come implementarlo al 100% con jquery....

<?php
print '<a class="collapse" href="javascript:espandi('.$contatore.');"><button type="button">riduci</button></a>';
?>

<script Language="javascript">
function espandi(id) {
      $("#mytable"+id+" tbody").show("slow");
}

</script>

[gianluis]

Se le tabelle hanno l'id mytable0, mytable1 eccc.... anche nella funzione devi richiamare gli stessi id
per� non sono espertissimo di jquery....

Ti posto un esempio modificando l'href, questo funziona di sicuro ma non so darti indicazioni esatte su come implementarlo al 100% con jquery....

<?php
print '<a class="collapse" href="javascript:espandi('.$contatore.');"><button type="button">riduci</button></a>';
?>

<script Language="javascript">
function espandi(id) {
      $("#mytable"+id+" tbody").show("slow");
}

</script>

grande autsel!!! funziona!!!

solo una considerazione: non ho usato la variabile $contatore ma, avendo gi� un ciclo while impostato su di una query, per non appesantire ulteriormente la pagina, ho semplicemente settato l'id mytable con la chiave primaria della mia tabella nel database:

$sql2 = "SELECT DATE_FORMAT(data_scad, '%d/%m/%Y') as data_it2 FROM pratiche WHERE assegnata_a = 'superuser' order by id_prat" ;
$result_data2= mysql_query($sql2);
$row_data2 =  mysql_fetch_array($result_data2);


$query_gest_prc="SELECT * from pratiche order by id_prat"; $result_gest_prc= mysql_query($query_gest_prc);	


 while($row_gest_prc = mysql_fetch_array($result_gest_prc) and $row_data =  mysql_fetch_array($result_data))	
{	
  
echo '<table border="1" width="1260px"  id="mytable'.$row_gest_prc['id_prat'].'">';

...

dove .$row_gest_prc['id_prat'] ripesca appunto dalla chiave primaria e univoca, pertanto il codice js diventa

<td><a class="expand" href="javascript:riduci('.$row_gest_prc['id_prat'].');">
<button type="button" style="width:100%" >Riduci</button></a></td>

grazie mille ancora autsel

[autsel]

Ma figurati, felice che tu abbia capito e risolto.
Va benissimo l'id_prat della tabella. Va bene qualsiasi riferimento per l'id, basta che sia univoco.
Ciao e buon lavoro