Lisa67000 Posted May 29, 2020 Share Posted May 29, 2020 Hello, I use this code to move(sortable) the rows of my table. I have a problem, he apply the js code to all the table!!! Even without tbody! Do you know why? thank you a lot!!! <div style="overflow-x: auto;"> <table id="table_id" style="overflow-x: auto;"> <thead> <tr class="ui-state-default"> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>Position</th> </tr> </thead> <tbody> <tr> <td contenteditable='true'>1</td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'>1</td> </tr> <tr> <td contenteditable='true'>2</td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'>2</td> </tr> <tr> <td contenteditable='true'></td> <td contenteditable='true'>3</td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'></td> <td contenteditable='true'>3</td> </tr> </tbody> </table> $("table tbody").sortable({ update : function(event, ui) { $(this).children().each(function(index) { $(this).find('td').last().html(index + 1) }); } }); Link to comment Share on other sites More sharing options...
Makwana Prahlad Posted June 3, 2020 Share Posted June 3, 2020 Hello,@Lisa67000 Please try this code,To sortable table rows $(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> I hope this code will be useful for you. Thank you. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now