[jQuery]テーブルを読み込み配列やJSON形式に変換するサンプル
-
カテゴリ：
- JavaScript
-
タグ：
- #jQuery
テーブルの情報を読み込み、配列やJSON形式のデータに変換するサンプルをjQueryで作成しました。
╰(*´︶`*)╯
HTML
<html>
<head>
<meta charset="utf8">
</head>
<body>
<table>
<thead>
<tr>
<th width="35%">日付</th>
<th width="40%">商品</th>
<th width="25%">価格</th>
</tr>
</thead>
<tbody>
<tr>
<td>2019/12/18</td>
<td>PC</td>
<td>220000</td>
</tr>
<tr>
<td>2019/12/18</td>
<td>モニター</td>
<td>45000</td>
</tr>
<tr>
<td>2019/12/18</td>
<td>キーボード</td>
<td>6500</td>
</tr>
<tr>
<td>2019/12/18</td>
<td>マウス</td>
<td>4500</td>
</tr>
</tbody>
</table>
</body>
</html>jQuery
function getFromTable() {
var counter = 0;
var line = [];
$("table tbody tr").map(function(index, val){
line[counter] = {"date":$(val).children().eq(0).text()
, "name":$(val).children().eq(1).text()
, "price":$(val).children().eq(2).text()};
counter += 1;
});
//配列形式
console.log(line);
//JSON形式
console.log(JSON.stringify(line));
}テーブルサンプル
+------------+-----------+---------+
¦ 日付 ¦ 商品 ¦ 価格 ¦
+------------+-----------+---------+
¦ 2019/12/18 ¦ PC ¦ 220000 ¦
¦ 2019/12/18 ¦ モニター ¦ 45000 ¦
¦ 2019/12/18 ¦ キーボード¦ 6500 ¦
¦ 2019/12/18 ¦ マウス ¦ 4500 ¦
+------------+-----------+---------+結果
配列形式
[Object {
date: "2019/12/18",
name: "PC",
price: "220000"
}, Object {
date: "2019/12/18",
name: "モニター",
price: "45000"
}, Object {
date: "2019/12/18",
name: "キーボード",
price: "6500"
}, Object {
date: "2019/12/18",
name: "マウス",
price: "4500"
}]
JSON形式（※可読性の関係上改行してます）
"[{date: '2019/12/18',name: 'PC',price: '220000'},
{date: '2019/12/18',name: 'モニター',price: '45000'},
{date: '2019/12/18',name: 'キーボード',price: '6500'},
{date: '2019/12/18',name: 'マウス',price: '4500'}]"
以上です！
投稿日：2019-12-10
更新日：2019-12-18
