jQuery में तालिका पंक्ति को कैसे स्थानांतरित करें?

कहें कि मेरे पास तालिका पंक्ति को ऊपर या नीचे स्थानांतरित करने के लिए ऊपर/नीचे तीर के साथ लिंक थे। उस पंक्ति को ऊपर या नीचे एक स्थान (jQuery का उपयोग करके) को स्थानांतरित करने का सबसे सरल तरीका क्या होगा?jQuery में तालिका पंक्ति को कैसे स्थानांतरित करें?

jQuery के अंतर्निहित तरीकों का उपयोग करके और jQuery के साथ पंक्ति का चयन करने के बाद ऐसा करने का कोई प्रत्यक्ष तरीका प्रतीत नहीं होता है, मुझे इसे स्थानांतरित करने का कोई तरीका नहीं मिला है। इसके अलावा, मेरे मामले में, पंक्तियों को खींचने योग्य बनाने (जिसे मैंने पहले प्लगइन के साथ किया है) एक विकल्प नहीं है।

स्रोत

2009-10-15 Wilco

आप अपने मंच पर एक ग्रिड नियंत्रण उपयोग करने का विकल्प है? –

146

तुम भी समायोज्य ऊपर/नीचे के साथ बहुत सरल कुछ कर सकते हैं ..

अपने लिंक दिया up के एक वर्ग है या down आप इस लिंक को क्लिक हैंडलर में तार कर सकते हैं। यह भी धारणा के तहत है कि लिंक ग्रिड की प्रत्येक पंक्ति के भीतर हैं।

$(document).ready(function(){ 
    $(".up,.down").click(function(){ 
     var row = $(this).parents("tr:first"); 
     if ($(this).is(".up")) { 
      row.insertBefore(row.prev()); 
     } else { 
      row.insertAfter(row.next()); 
     } 
    }); 
});

HTML:

<table> 
    <tr> 
     <td>One</td> 
     <td> 
      <a href="#" class="up">Up</a> 
      <a href="#" class="down">Down</a> 
     </td> 
    </tr> 
    <tr> 
     <td>Two</td> 
     <td> 
      <a href="#" class="up">Up</a> 
      <a href="#" class="down">Down</a> 
     </td> 
    </tr> 
    <tr> 
     <td>Three</td> 
     <td> 
      <a href="#" class="up">Up</a> 
      <a href="#" class="down">Down</a> 
     </td> 
    </tr> 
    <tr> 
     <td>Four</td> 
     <td> 
      <a href="#" class="up">Up</a> 
      <a href="#" class="down">Down</a> 
     </td> 
    </tr> 
    <tr> 
     <td>Five</td> 
     <td> 
      <a href="#" class="up">Up</a> 
      <a href="#" class="down">Down</a> 
     </td> 
    </tr> 
</table>

Demo - JsFiddle

स्रोत

2009-10-15 01:52:46

@Quintin: इसके लिए धन्यवाद। यदि tr पंक्ति शैली कोई भी प्रदर्शित नहीं करती है, तो मैं पंक्तियों को पिछली पंक्ति में कैसे स्थानांतरित कर सकता हूं जो ब्लॉक प्रदर्शित होता है? यदि कोई भी पंक्ति शैली प्रदर्शित नहीं होती है, तो मुझे ऊपर या नीचे जाने के लिए कई बार क्लिक करना होगा। कोई उपाय ? – Paulraj

पहली पंक्ति के लिए "ऊपर" लिंक को छिपाने के तरीके और अंतिम पंक्ति के लिए "डाउन" लिंक पर कोई सुझाव? – rboarman

@rboarman '$ ("। Up, .down ") के साथ कुछ। शो();' फिर '$ (" tr: first .up, tr: last .down ")। छुपाएं();' लेकिन आपको चयनकर्ताओं को अपनी सटीक जरूरतों में बदलाव करने की आवश्यकता हो सकती है। –

$(document).ready(function() { 
    $(".up,.down").click(function() { 
     var $element = this; 
     var row = $($element).parents("tr:first"); 

     if($(this).is('.up')){ 
     row.insertBefore(row.prev()); 
     } 
     else{ 
     row.insertAfter(row.next()); 
     } 

    });

});

का उपयोग करके देखें JSFiddle

स्रोत

2014-09-10 14:00:22

इसे कम कर सकता है: var row = $ (this) .closest ('tr'); –

jQuery में तालिका पंक्ति को कैसे स्थानांतरित करें?

उत्तर

संबंधित मुद्दे