初心者向け!JQueryでテーブル内のテキストを配列に追加!

#技術系
written by 銀太

どうもです!

気が付いたら5月に入ってますね~
気温も徐々に上がっていき、夏まっしぐらですね!
今年も夏が待ち遠しいです!

さて、今回はJQueryでテーブルのデータの取得方法をご紹介してこうかと思います!

テーブルの用意

まずは最初にテーブルを用意していきましょう!

下記ソースをご覧ください!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テーブルデータ取得</title>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
    <table id="sample" border="1">
        <thead>
            <tr>
                <th>1列目</th>
                <th>2列目</th>
                <th>3列目</th>
                <th>4列目</th>
                <th>5列目</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>ワンピース</td>
                <td>ナルト</td>
                <td>ブリーチ</td>
                <td>HUNTER×HUNTER</td>
                <td>呪術廻戦</td>
            </tr>
        </tbody>
    </table>
    <button type="button" onclick="get_value()">ボタン</button>
</body>
</html>

下記ソースをブラウザで確認するとこんな感じになります!

 

スタイル当て込んでなくて質素に見えますがそこはお許し下さい~~!m(_ _)m

上記のソースの注意点はJQueryを使えるようにすることを忘れないようにしましょう!!

さて次はこのテーブルタグの中にあるジャンプ作品の名前を取っていきましょう!!

テーブルタグをeach文で回す

さて、本題のテーブルタグ内の情報を取得する方法ですが、方法としてはいくつかありますが、

今回は、tableタグのtdをeach文で回して取得する方法をご紹介したいと思います!

それではさっそく、下記ソースをご確認下さい!

 function get_value () {
   $('#sample tbody td').each(function (index) {
      console.log($(this).text());
    });
}

上記ソースをjsファイルを作ってheadタグ内で読み込ませるか、スクリプトタグ内に直接記入して下さい!

上記のソースで大切なところは2点あります!

コメントアウト箇所を確認下さい!

// idで指定したテーブル名のtbody内のtdをeach文で回す
$('#sample tbody td').each(function (index) {
      //thisでeach文で回っているテーブル内の文字を取得
   console.log($(this).text());
 });

そして上記ソースを読み込ませて、ボタンを押すとコンソールログ上を見ると下記の様になります!

取得出来ているのが確認出来ましたか?

意外と簡単に取れますよね!

それでは次はeach文で回したジャンプ作品たちを配列に追加していきましょう!

配列に追加

さきほどの取得方法だとeach文内でしかジャンプ作品のリストが見る事しか出来ないので、each文外でもジャンプリストを見れるようにしましょう!

それでは下記ソースをご覧ください!

 function get_value () {
        var jump_list = new Array();
        $('#sample tbody td').each(function (index) {
            jump_list.push($(this).text());
        });
        console.log(jump_list);
    }

上記ソースで大切な箇所は2点あります!

コメントアウト箇所を確認下さい!

function get_value () {
    // 配列の宣言
        var jump_list = new Array();
        $('#sample tbody td').each(function (index) {
       // 宣言した配列にテーブル内のテキストを挿入
            jump_list.push($(this).text());
        });
        console.log(jump_list);
    }

それでは上記ソースをコンソール上で確認すると下記のようになります!

コンソールログ上に配列が出力されていることが確認出来ましたか??

これでtable内のテキストを配列に挿入することが出来ましたね!!

最後に

これでテーブルタグ内のテキストを配列に取得する方法が分かりましたね!

この記事で誰かの役に立てたのなら幸いです!

それでは皆さん良い一日を!!!