अगली तालिका पंक्ति

Question

का उपयोग करने के लिए JQuery का उपयोग करना JQuery का उपयोग करके, आप एक तालिका कक्ष (नीचे, वर्ग = "विस्तार") पर एक क्लिक ईवेंट कैसे बाध्य करते हैं जो छवि स्रोत को बदल देगा (जो क्लिक किए गए सेल में है - मूल इच्छा plus.gif बनें, minus.gif के साथ वैकल्पिक) और उस पंक्ति के नीचे तुरंत पंक्ति को छुपाएं/दिखाएं कि उस पंक्ति में "छिपाने" की कक्षा है या नहीं। (इसे दिखाएं यदि इसमें "छिपाने" की एक कक्षा है और छुपाएं यदि इसमें "छिपाने" की कक्षा नहीं है)। मैं मार्कअप में बदलते आईडी और कक्षाओं के साथ लचीला हूँ।

धन्यवाद

तालिका पंक्तियों

<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

आप शो की जरूरत है और टैग छुपा नहीं है:

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

संपादित करें: ठीक है, मैं छवि को बदलने के लिए कोड जोड़ा। ऐसा करने का यह एक तरीका है। मैंने टैग के रूप में विस्तारित विशेषता में एक वर्ग जोड़ा, जब पंक्ति जो निम्नानुसार है, छिपी हुई है और जब पंक्ति दिखाई गई तो इसे हटा दिया गया।

Answer 2

यह कैसे छवियों एचटीएमएल

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

बदलें जे एस में है कि अपनी खुद की कार्य करने के लिए onClick घटना उन दोनों के बीच टॉगल करने के लिए में स्थापित कर रहे हैं।

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

में इस प्रयास करें ...

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

आशा इस मदद करता है।

Answer 4

किसी को भी टर्नरी ऑपरेटर के लिए कोई प्यार नहीं है? :) मैं पठनीयता बातों को समझते हैं, लेकिन किसी कारण से उस पर क्लिक करता मुझे के रूप में यह लिखने के लिए:

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

... और उसमें कोई बाहरी वर्गों को लाभ मिलता है।

Answer 5

मुझे हाल ही में इस समस्या को हल करना पड़ा, लेकिन मेरा कुछ नेस्टेड टेबल शामिल था, इसलिए मुझे जावास्क्रिप्ट का एक और विशिष्ट, सुरक्षित संस्करण चाहिए। मेरी स्थिति थोड़ा अलग थी क्योंकि मेरे पास टीडी की सामग्री थी और अगले टीआर को टॉगल करना चाहता था, लेकिन अवधारणा वही है।

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

निकटतम टीआर निकटतम टीआर, इस मामले में पहले माता-पिता को पकड़ता है। यदि आप बेहद विशिष्ट प्राप्त करना चाहते हैं तो आप वहां एक सीएसएस कक्षा जोड़ सकते हैं। फिर मैं विस्तारित वर्ग की कक्षा के साथ अगले टीआर को पकड़ने के लिए निर्दिष्ट करता हूं, इस बटन के लिए लक्ष्य। तब मैं सिर्फ fadeToggle() टॉगल करता हूं कि यह प्रदर्शित होता है या नहीं। चयनकर्ताओं को निर्दिष्ट करना वास्तव में इसे संभालने में मदद करता है।