Utilizzo di JQuery per trovare la riga successiva della tabella


15

Utilizzando JQuery, come si associa un evento click a una cella della tabella (in basso, class = "expand") che cambierà l'immagine src (che si trova nella cella selezionata - originale be plus.gif, alternando con minus.gif) e nascondi/mostra la riga immediatamente sotto di essa in base al fatto che quella riga abbia una classe di "nascondi". (mostra se ha una classe di "nascondi" e nasconde se non ha una classe di "nascondi"). Sono flessibile con la modifica di ID e classi nel markup.

Grazie

righe della tabella

<tr> 
<td class="expand"><img src="plus.gif"/></td> 
<td>Data1</td><td>Data2</td><td>Data3</td> 
</tr> 
<tr class="show hide"> 
<td> </td> 
<td>Data4</td><td>Data5</td><td>Data6</td> 
</tr> 
18

Non è necessario il mostrare e nascondere i tag:

$(document).ready(function(){ 
    $('.expand').click(function() { 
     if($(this).hasClass('hidden')) 
      $('img', this).attr("src", "plus.jpg"); 
     else 
      $('img', this).attr("src", "minus.jpg"); 

     $(this).toggleClass('hidden'); 
     $(this).parent().next().toggle(); 
    }); 
}); 

di modifica: Va bene, ho aggiunto il codice per cambiare l'immagine. Questo è solo un modo per farlo. Ho aggiunto una classe all'attributo expand come tag quando la riga che segue è nascosta e rimossa quando la riga è stata mostrata.

  0

Non ti piace il jQuery? Invece di '$ (this) .find ('img')' potresti usare il poco più conciso '$ ('img', questo)'. La funzione '$' accetta un secondo parametro. Quando viene utilizzato, jQuery cerca solo il selettore nel contesto di 'this'. 23 set. 082008-09-23 20:30:33

  0

Grazie, ho apportato queste modifiche. 23 set. 082008-09-23 20:37:07

  0

che mi sembra un po 'arretrato. tutto il resto legge da sinistra a destra, mentre con quella sintassi devi leggere da destra a sinistra. entrambi hanno lo stesso identico effetto, quindi in genere cerco di attenermi allo stile $ (this) .find (...). 20 ott. 082008-10-20 01:42:46

+2

Mi chiedo se c'è qualche differenza di prestazioni. Per esempio. L'utilizzo di uno o dell'altro causa l'esecuzione di codice diverso all'interno del budello di jQuery? 06 mar. 092009-03-06 19:06:15


-2

Questo è come le immagini sono impostati nel html

<tr> 

<td colspan="2" align="center" 
<input type="image" src="save.gif" id="saveButton" name="saveButton" 
    style="visibility: collapse; display: none" 
    onclick="ToggleFunction(false)"/> 

<input type="image" src="saveDisabled.jpg" id="saveButtonDisabled" 
     name="saveButton" style="visibility: collapse; display: inline" 
     onclick="ToggleFunction(true)"/> 
</td> 
</tr> 

Cambiare l'evento onClick per la propria funzione che è in JS per passare tra di loro.

Nel

ToggleFunction(seeSaveButton){  
    if(seeSaveButton){ 
     $("#saveButton").attr("disabled", true) 
         .attr("style", "visibility: collapse; display: none;"); 
     $("#saveButtonDisabled").attr("disabled", true) 
           .attr("style", "display: inline;"); 
    }  
    else {  
     $("#saveButton").attr("disabled", false) 
         .attr("style", "display: inline;"); 
     $("#saveButtonDisabled") 
         .attr("disabled", true) 
         .attr("style", "visibility: collapse; display: none;"); 
    } 
} 
  0

Se rientri ogni riga di codice di 4 spazi appare come un blocco "codice", mostrando tag di apertura, ecc. 23 set. 082008-09-23 20:28:27


1

Prova questo ...

//this will bind the click event 
//put this in a $(document).ready or something 
$(".expand").click(expand_ClickEvent); 

//this is your event handler 
function expand_ClickEvent(){ 
    //get the TR that you want to show/hide 
    var TR = $('.expand').parent().next(); 

    //check its class 
    if (TR.hasClass('hide')){ 
     TR.removeClass('hide'); //remove the hide class 
     TR.addClass('show'); //change it to the show class 
     TR.show();    //show the TR (you can use any jquery animation) 

     //change the image URL 
     //select the expand class and the img in it, then change its src attribute 
     $('.expand img').attr('src', 'minus.gif'); 
    } else { 
     TR.removeClass('show'); //remove the show class 
     TR.addClass('hide'); //change it to the hide class 
     TR.hide();    //hide the TR (you can use any jquery animation) 

     //change the image URL 
    //select the expand class and the img in it, then change its src attribute 
     $('.expand img').attr('src', 'plus.gif'); 
    } 
} 

Spero che questo aiuti.

  0

grazie, questo è un codice utile .... ma $ ('. Expand img') avrà effetto su tutti le immagini nella classe di espansione ... Voglio solo effettuare l'immagine nella cella della tabella (<td>) 23 set. 082008-09-23 20:36:57


9

Nessuno ha amore per l'operatore ternario? :) Capisco considerazioni di leggibilità, ma per qualche ragione non scatta per me scrivere come:

$(document).ready(function() { 
    $(".expand").click(function() { 
      $("img",this).attr("src", 
       $("img",this) 
        .attr("src")=="minus.gif" ? "plus.gif" : "minus.gif" 
      ); 
      $(this).parent().next().toggle(); 
    }); 
}); 

... e ha il vantaggio di classi estranei.


3

Ho dovuto risolvere questo problema di recente, ma il mio ha coinvolto alcune tabelle nidificate, quindi avevo bisogno di una versione più specifica e più sicura di javascript. La mia situazione era leggermente diversa perché avevo il contenuto di un td e volevo attivare il prossimo TR, ma il concetto rimane lo stesso.

$(document).ready(function() { 
    $('.expandButton').click(function() { 
     $(this).closest('tr').next('tr.expandable').fadeToggle(); 
    }); 
}); 

Più vicino afferra il TR più vicino, in questo caso il primo genitore. Potresti aggiungere una classe CSS lì se vuoi essere estremamente specifico. Quindi specifico per afferrare il prossimo TR con una classe di espandibile, l'obiettivo per questo pulsante. Poi ho solo fadeToggle() per alternare se è visualizzato o meno. Specificare i selettori aiuta davvero a restringere ciò che gestirà.