jQuery の並べ替え可能なテーブル

Sheeraz Gul 2023年10月12日

jQuery jQuery Table

このチュートリアルでは、jQuery で並べ替え可能なテーブルを作成する方法を示します。

jQuery で並べ替え可能なテーブルを作成する

jQuery UI パッケージには sortable() メソッドがあり、DOM オブジェクトのドラッグによる並べ替え機能を実装しています。このメソッドの構文は次のとおりです。

$(selector).sortable();

sortable メソッドは、リスト、テーブルなどで実装できます。sortable() メソッドのデフォルト機能を使った簡単な例を試してみましょう。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Sortable</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
    <style>
    #DemoList {
    list-style-type: none;
    width: 20%;
    }
    #DemoList li {
    border: 5px solid green;
    background-color : lightgreen;
    height: 18px;
    padding: 0.5em;
    padding-left: 2em;
    font-size: 2em;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
    <script>
    $( function() {
        $( "#DemoList" ).sortable();
    });
  </script>
</head>
<body>

<ul id="DemoList">
    <li class="ui-state-default">Delftstack 1</li>
    <li class="ui-state-default">Delftstack 2</li>
    <li class="ui-state-default">Delftstack 3</li>
    <li class="ui-state-default">Delftstack 4</li>
    <li class="ui-state-default">Delftstack 5</li>
</ul>


</body>
</html>

上記のコードは、リストのデフォルトの sortable 関数を実装しています。出力を参照してください。

jQuery ソート可能

それでは、jQuery UI メソッド sortable() メソッドを使用して、並べ替え可能なテーブルを作成してみましょう。ソート可能なテーブルを作成するには、jQuery UI ドキュメントで提供されているオプション、メソッド、およびイベントを使用して sortable() メソッドをカスタマイズすることもできます。例を試してみましょう。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Sortable Table</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

    <style type="text/css">
    table th, table td
    {
        width: 150px;
        padding: 10px;
        border: 3px solid #ccc;
    }
    .Selected_Row
    {
        background-color: lightgreen;
        color: darkgreen;
    }
    </style>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
     <script type="text/javascript">
    $(function () {
        $("#DemoTable").sortable({
            items: 'tr:not(tr:first-child)',
            cursor: 'move',
            axis: 'y',
            dropOnEmpty: true,
            scroll: true,
            tolerance: "pointer",
            start: function (e, ui) {
                ui.item.addClass("Selected_Row");
            },
            stop: function (e, ui) {
                ui.item.removeClass("Selected_Row");
                $(this).find("tr").each(function (index) {
                    if (index > 0) {
                        $(this).find("td").eq(3).html(index);
                    }
                });
            }
        });
    });
    </script>
</head>
<body>


<table id="DemoTable">
    <tr>
        <th>ID </th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Preference</th>
    </tr>
    <tr>
        <td>1</td>
        <td>James</td>
        <td>Smith</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Robert</td>
        <td>Smith</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Maria</td>
        <td>Rodriguez</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>James</td>
        <td>Johnson</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>John</td>
        <td>Trovolta</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Jack</td>
        <td>Danials</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>Dana</td>
        <td>White</td>
        <td>7</td>
    </tr>
    <tr>
        <td>8</td>
        <td>Josh</td>
        <td>Thompson</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>Connor</td>
        <td>Rollins</td>
        <td>9</td>
    </tr>
</table>
</body>
</html>

上記のコードは sortable() メソッドをカスタマイズし、cursor、axis、dropOnEmpty、scroll、tolerance オプションと start、および stop メソッドを使用します。このコードは、ドラッグ可能な機能を備えた並べ替え可能なテーブルを作成します。

出力を参照してください。

jQuery ソート可能テーブル

著者： Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook