使用 jQuery UI 可排序的 HTML 表格 [英] Using jQuery UI sortable with HTML tables

问题描述

我想在 HTML 表格中从数据库中输出一些数据，并且我希望用户能够重新排序表格行.为了实现这一点，我使用了 jQuery UI sortable，因此:

I want to output some data from the database in a HTML table, and I want the user to be able to reorder table rows. To achieve this, I used jQuery UI sortable, thus:

<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被拖动.此外，最重要的是，只有第一行是可拖动的:该效果不适用于其他行.我该如何解决这个问题?

The problem is that when I drag a table tr, only td are dragged. Also, and most importantly, only the first row is dragable: the effect is not applied to other rows. How can I solve this?

推荐答案

您可以在 上调用 sortable 而不是在单个行上调用.>

You can call sortable on a <tbody> instead of on the individual rows.

<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>

这篇关于使用 jQuery UI 可排序的 HTML 表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！