初心者向け！JQueryでテーブル内のテキストを配列に追加！
どうもです！
気が付いたら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内のテキストを配列に挿入することが出来ましたね！！
最後に
これでテーブルタグ内のテキストを配列に取得する方法が分かりましたね！
この記事で誰かの役に立てたのなら幸いです！
それでは皆さん良い一日を！！！