jQuery 2024.03.06

【jQuery】表の横スクロール可能を示すメッセージを必要な時だけ表示させる

みんなの簡素を教えてね！

すごい！ (0)
やってみようと思う！ (0)

せっかくCSSを利用してテーブルをスクロール可能にしても、スクロールが可能であると分かりにくければ使用感を損ねます。この記事ではjQueryを使用して、「この表は横にスクロールできます」というメッセージを表示する方法を紹介します。

表を横スクロール可能にする方法については、こちらの記事でご紹介しています。

1 準備
- 1.1 HTMLとCSS
- 1.2 jQueryの追加
2 実践
3 デモ
4 まとめ

準備

HTMLとCSS

まず、HTMLを準備します。.table_boxというクラス名のdivで<table>を囲みます。これにより、表がこのdiv内でどのように表示されるかを制御できます。

HTML:

<div class="scroll_message">この表は横にスクロールできます</div>
<div class="table_box">
    <table>
        <tbody>
            <tr>
                <th>見出し1</th>
                <td>見出し1の内容ダミーテキスト</td>
                <td>見出し1の内容ダミーテキスト</td>
                <td>見出し1の内容ダミーテキスト</td>
            </tr>
            <tr>
                <th>見出し2</th>
                <td>見出し2の内容ダミーテキスト</td>
                <td>見出し2の内容ダミーテキスト</td>
                <td>見出し2の内容ダミーテキスト</td>
            </tr>
            <tr>
                <th>見出し3</th>
                <td>見出し3の内容ダミーテキスト</td>
                <td>見出し3の内容ダミーテキスト</td>
                <td>見出し3の内容ダミーテキスト</td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

.scroll_message {
    display: none;
}

.table_box {
    overflow-x: auto;
    display: block;
}

.table_box table th,
.table_box table td {
    white-space: nowrap;
}

「.table_boxよりもtableが大きければ.scroll_messageを表示」とするため、最初はdisplay: none;を使って隠しておきます。

jQueryの追加

今回はjQueryを使用するため、まずjQueryライブラリを<head>内（またはHTMLファイルの末尾）に追加する必要があります。
バージョンに誤差はあるかもしれませんが、このような記述がすでに入っていれば問題ありません。

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

jQueryの追加方法についてはこちらの記事でご紹介していますので、必要な方は御覧ください。
※最新のcdnは公式サイトから取得してください。

実践

jQueryを使用して.table_boxのdivとその中の<table>の横幅をチェックし、条件に応じてメッセージを表示する方法を紹介します。分かりやすくするために、コードをいくつかの部分に分割して詳しく説明します。

ドキュメントが準備できたら関数を実行

$(document).ready(function() {
    // この中に書かれたコードは、ページのDOMが完全に読み込まれた後に実行されます。
});

$(document).ready(function(){…});は、ページのDOM（Document Object Model）が完全に読み込まれて準備が整った後に実行される関数を指定します。

横幅をチェックする関数の定義

function checkTableWidth() {
    var tableBoxWidth = $('.table_box').width(); // .table_boxの横幅を取得
    var tableWidth = $('.table_box table').outerWidth(); // tableの横幅（外側の余白を含む）を取得

    if (tableWidth > tableBoxWidth) { // tableの横幅が.table_boxの横幅より大きい場合
        $('.scroll_message').show(); // メッセージを表示
    } else {
        $('.scroll_message').hide(); // それ以外の場合、メッセージを非表示にする
    }
}

var tableBoxWidth = $(‘.table_box’).width();では、.table_boxの横幅をピクセル単位で取得します。
var tableWidth = $(‘.table_box table’).outerWidth();では、.table_box内の<table>の外側の余白を含めた横幅を取得します。
if (tableWidth > tableBoxWidth)の条件で、もし<table>の横幅が.table_boxの横幅よりも大きければ、.scroll_messageのメッセージを表示します（.show()）。そうでなければ、メッセージを非表示にします（.hide()）。

ページ読み込み時とウィンドウサイズ変更時に横幅チェックを実行

$(document).ready(function(){
    checkTableWidth(); // ページ読み込み時に実行
    $(window).resize(function(){ // ウィンドウのサイズが変更された場合にもチェック
        checkTableWidth();
    });
});

checkTableWidth();で、ページが読み込まれた時に横幅チェック関数を初回実行します。
$(window).resize(function(){…});で、ブラウザのウィンドウサイズが変更されるたびに横幅チェック関数を再度実行します。これにより、ウィンドウサイズの変更によって表の表示が変わる場合でも、ユーザーに正確な情報を提供できます。

完成したコード

上記の工程を組み合わせて、完成したコードがこちらです。

$(document).ready(function(){
    function checkTableWidth() {
        var tableBoxWidth = $('.table_box').width(); // .table_boxの横幅を取得
        var tableWidth = $('.table_box table').outerWidth(); // tableの横幅（外側の余白を含む）を取得
        if (tableWidth > tableBoxWidth) { // tableの横幅が.table_boxの横幅より大きい場合
            $('.scroll_message').show(); // メッセージを表示
        } else {
            $('.scroll_message').hide(); // それ以外の場合、メッセージを非表示にする
        }
    }
    checkTableWidth(); // ページ読み込み時に実行
    $(window).resize(function(){ // ウィンドウのサイズが変更された場合にもチェック
        checkTableWidth();
    });
});

このコード追加することで、「この表は横にスクロールできます」というメッセージが、条件に応じて適切に表示されるようになります。