sortable table rows

[Lisa67000]

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

[Makwana Prahlad]

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.