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


15

का उपयोग करने के लिए 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> 
18

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

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

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

  0

क्या आप सिर्फ jQuery से प्यार नहीं करते हैं? '$ (this) .find ('img') के बजाय 'आप थोड़ा अधिक संक्षिप्त' $ ('img', this) का उपयोग कर सकते हैं। '$' फ़ंक्शन एक दूसरा पैरामीटर स्वीकार करता है। जब इसका उपयोग किया जाता है तो jQuery केवल 'इस' के संदर्भ में चयनकर्ता की तलाश करता है। 23 sep. 082008-09-23 20:30:33

  0

धन्यवाद, मैंने उन परिवर्तन किए हैं। 23 sep. 082008-09-23 20:37:07

  0

जो मुझे थोड़ा सा पीछे महसूस करता है। बाकी सब कुछ बाएं से दाएं पढ़ता है, जबकि उस वाक्यविन्यास का उपयोग करके आपको बाईं ओर दाईं ओर पढ़ना होगा। दोनों के पास एक ही प्रभाव है, इसलिए मैं आम तौर पर $ (इस) .find (...) शैली से चिपकने की कोशिश करता हूं। 20 oct. 082008-10-20 01:42:46

+2

मुझे आश्चर्य है कि कोई प्रदर्शन अंतर है या नहीं। उदाहरण के लिए। JQuery के गले के अंदर निष्पादित करने के लिए एक या दूसरे कारण का अलग कोड उपयोग कर रहा है? 06 mar. 092009-03-06 19:06:15


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

यदि आप प्रत्येक कोड लाइन को 4 रिक्त स्थान से इंडेंट करते हैं तो यह "कोड" ब्लॉक के रूप में दिखाई देता है, जिसमें खोलने वाले टैग, आदि दिखाते हैं .. 23 sep. 082008-09-23 20:28:27


1

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

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

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

  0

धन्यवाद, यह कुछ उपयोगी कोड है .... लेकिन $ ('विस्तृत करें img') सभी को प्रभावित करेगा विस्तार वर्ग में छवियां ... मैं बस तालिका कक्ष में एक छवि को प्रभावित करना चाहता हूं (<td>) 23 sep. 082008-09-23 20:36:57


9

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

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

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


3

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

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

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