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

Question

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> 

Answer 1

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

Answer 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;"); 
    } 
} 

Answer 3

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.

Answer 4

Üçü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.

Answer 5

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.