Sonraki tablo satırını bulmak için JQuery'yi kullanma


15

JQuery'yi kullanarak, tıklatılan hücrede bulunan orijinal bir tabloyu (aşağıdaki, class = "genişlet") bir tablo hücresine nasıl bağlarsınız? plus.gif, minus.gif ile dönüşümlü olarak sıralayın ve satırın "gizle" sınıfına sahip olup olmadığına göre hemen altındaki satırı gizleyin/gösterin. (eğer bir "gizleme" sınıfına sahipse ve "saklanma" sınıfına sahip değilse saklayın). İşaretlemede kimlikleri ve sınıfları değiştirerek esnekim.

Teşekkür

Tablo satırları

<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

Şovu ihtiyaç ve etiketlerini gizlemek yok:

$(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(); 
    }); 
}); 

düzenleme: Tamam, imajını değiştirmek için kod eklendi. Bunu yapmanın tek yolu bu. İzleyen satır gizlendiğinde ve satır görüntülendiğinde kaldırıldığında genişletme özniteliğine bir etiket olarak bir sınıf ekledim.

  0

Sadece jQuery'yi sevmiyor musunuz? '$ (this) .find ('img')' yerine, biraz daha özlü '' $ ('img', bu) 'kullanabilirsiniz. '$' Işlevi ikinci bir parametre kabul eder. JQuery kullanıldığında, sadece "bu" bağlamında seçiciyi arar. 23 eyl. 082008-09-23 20:30:33

  0

Teşekkürler, bu değişiklikleri yaptım. 23 eyl. 082008-09-23 20:37:07

  0

bana biraz geri geliyor. Diğer her şey soldan sağa okur, oysa bu sözdizimini kullanarak sağdan sola okumanız gerekir. İkisi de aynı etkiye sahipler, bu yüzden genellikle $ (this) .find (...) stiline bağlı kalmaya çalışıyorum. 20 eki. 082008-10-20 01:42:46

+2

Herhangi bir performans farkı olup olmadığını merak ediyorum. Örneğin. Birini veya diğerini kullanmak jQuery'nin bağırsaklarında yürütmek için farklı kodlara neden olur mu? 06 mar. 092009-03-06 19:06:15


-2

Bu görüntüler

<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> 

Değişim JS var kendi işlevine onClick etkinliğin kendileri arasında geçiş yapmak için html ayarlanır nasıl. Bunu deneyin

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

Her kod satırını 4 boşluk girintisi yaparsanız, "kod" bloğu, açılış etiketlerini vb. Gösterir. 23 eyl. 082008-09-23 20:28:27


1

yılında

... bu yardımcı olur

//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'); 
    } 
} 

Umut.

  0

teşekkürler, bu bazı yararlı kod .... ama $ ('. Expand img') tümünü etkiler genişletin sınıfındaki görüntüler ... Sadece tablo hücresindeki bir görüntüyü etkilemek istiyorum (<td>) 23 eyl. 082008-09-23 20:36:57


9

Üçüncül operatör için kimsenin sevgisi yok mu? :) Ben okunabilirliği konuları anlamak, ama nedense bana gibi yazmak için tıklamaları:

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

... ve hiçbir yabancı sınıfların yararı vardır.


3

Son zamanlarda bu sorunu çözmek zorunda kaldım, ancak benim bazı iç içe geçmiş tablolar içeriyordu, bu yüzden daha spesifik, daha güvenli bir javascript sürümüne ihtiyacım vardı. Durumum biraz farklıydı çünkü bir td'nin içeriği vardı ve bir sonraki TR'yi değiştirmek istedim, ama konsept aynı kalıyor.

En yakın TR, bu durumda ilk üst öğeyi alır. Son derece spesifik olmak istiyorsanız, orada bir CSS sınıfı ekleyebilirsiniz. Ardından, bir sonraki TR'yi genişletilebilir bir sınıfla, bu düğmenin hedefi ile yakalamayı seçiyorum. Sonra sadece görüntülenip görüntülenmeyeceğini değiştirmek için sadece fadeToggle(). Seçicilerin belirtilmesi gerçekten ne işleyeceğini daraltmaya yardımcı olur.