HTML टेबल के साथ jQuery UI सॉर्टेबल का उपयोग करना

Question

मैं HTML तालिका में डेटाबेस से कुछ डेटा का उत्पादन करना चाहता हूं, और मैं चाहता हूं कि उपयोगकर्ता तालिका पंक्तियों को फिर से व्यवस्थित करने में सक्षम हो। इसे प्राप्त करने के लिए, मैंने jQuery UI सॉर्टेबल का उपयोग किया, इस प्रकार:

<script>
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
    </script>
<?php 
 while($row = mysql_fetch_assoc($co_authors)) {
                    echo "<tr id='sortable'><td>{$row['author_email']}</td>
                         <td>{$row['coauthor_level']}</td>";
                         <td><button class='remove' id='remove' name='remove' email="<?php echo $row['author_email'] ?>"
                            paper="<?php echo $row['paper_id'] ?>">Remove</button></td>
                         </tr>";
                }
?>

समस्या यह है कि जब मैं एक तालिका खींचता हूं tr, तो केवल tdघसीटा जाता है। इसके अलावा, और सबसे महत्वपूर्ण बात, केवल पहली पंक्ति खींचने योग्य है: प्रभाव अन्य पंक्तियों पर लागू नहीं होता है। इसे कैसे हल किया जा सकता है?

Comments

idकिसी दस्तावेज़ के भीतर विशेषताएँ अद्वितीय होनी चाहिए। आपका कोड समान id( sortable) के साथ कई तत्व बना रहा है । classइसके बजाय प्रयोग करके देखें ।

— फ्रैडरिक हमीदी

क्या यह की कीमत के लिए - tdसाथ है contenteditableविशेषता संपादन योग्य होने के लिए अगर उनके पंक्ति इस पद्धति का उपयोग छाँटा जा सकता है नहीं है। बस एक FYI करें।

— jg2703

Answer 1

आप कॉल कर सकते हैं sortableपर एक <tbody>के बजाय अलग-अलग पंक्तियों पर।

<table>
    <tbody>
        <tr> 
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td> 
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>  
    </tbody>    
</table>​

<script>
    $('tbody').sortable();
</script> 

$(function() {
  $( "tbody" ).sortable();
});

 
table {
    border-spacing: collapse;
    border-spacing: 0;
}
td {
    width: 50px;
    height: 25px;
    border: 1px solid black;
}

 

<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<table>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr> 
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
        </tr>
        <tr>
            <td>9</td> 
            <td>10</td>
        </tr>  
    </tbody>    
</table>

Comments

अब यह ठीक काम कर रहा है, और पूरा tr खींचने योग्य है, लेकिन अब नई समस्या यह है कि tr स्थिति नहीं बदलती है, मुझे लगता है क्योंकि मैं डेटाबेस से डेटा प्राप्त करता हूं और उन्हें उसी क्रम में आना चाहिए, इसलिए क्या मैं स्थिति बदल सकता हूं डेटाबेस में भी?

— समीर एल गेंडी

यदि आप छांटे गए पदों को संरक्षित करना चाहते हैं, तो आपको वह जानकारी कहीं न कहीं जारी रखनी होगी।

— TJ VanToll

हाँ धन्यवाद !! मुझे बहुत डर था कि मुझे पूरे डिज़ाइन को फिर से बनाना होगा और मेरे पास इसे काम करने के लिए केवल एक घंटा था, धन्यवाद ढेर!

— नैचुरलबोर्नकेम्पर

User236766 की ओर से पोस्टिंग : आप अंतिम <tbody>को बदलना चाह सकते हैं </tbody>;)

— NathanOliver

पता नहीं क्यों मैं मेज पर सॉर्ट करने के लिए कॉल का फैसला किया और नहीं तत्व तत्व ... धन्यवाद!

— ksudu94