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