[jQuery]テーブルを読み込み配列やJSON形式に変換するサンプル

テーブルの情報を読み込み、配列や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

[スポンサーリンク]

  
関連記事
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
勉強した内容を緩くメモする|JBの技術メモ
サイト内検索
プロフィール

プロフィール

[Name : じゃぶじゃぶ(@jbjb_2019)]
都内で社内SEをしているおじさん。
仕事で得られる知識だけでは限界を感じ、 WEBの勉強がてらITブログを開始。
サーバからWEBサイトまでフルスクラッチで開発しました。
現在は勉強のモチベーションを保つために活用中。
興味があることを雑記的に書いていきます。

[スポンサーリンク]

[スポンサードリンク]