programing

HTML 테이블과 함께 정렬 가능한 jQuery UI 사용

newstyles 2023. 8. 27. 08:59

HTML 테이블과 함께 정렬 가능한 jQuery UI 사용

HTML 테이블의 데이터베이스에서 일부 데이터를 출력하고 사용자가 테이블 행을 다시 정렬할 수 있기를 원합니다.이를 위해 jQuery UI sortable을 사용했습니다.

<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끌려갑니다.또한 가장 중요한 것은 첫 번째 행만 끌 수 있다는 것입니다. 즉, 효과는 다른 행에는 적용되지 않습니다.어떻게 해결해야 하나요?

전화할 수 있습니다.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>

언급URL : https://stackoverflow.com/questions/11470775/using-jquery-ui-sortable-with-html-tables