[jQuery] TABLEの値をObjectの配列にする

投稿日：2017年7月23日更新日：2018年5月2日

TABLEの値をObjectの配列にするサンプルです。

サンプルソース

例）ボタンを押すとTABLEの値をオブジェクトにする

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#btn1').click(function(){
    //変数定義
    var arr = [];
    var obj = {};

    //テーブルの値をObject配列に格納する
    $("tr").each(function(i){
      obj = new Object();
      $(this).children().each(function(j){
        obj[j] = $(this).text();
      });
      arr.push(obj);
    });

    //コンソールに出力してみる
    console.log(arr);
  });
});
</script>
</head>
<body>
<input type="button" id="btn1" value="ボタン">

<table>
  <tr><td>a1</td><td>a2</td><td>a3</td></tr>
  <tr><td>b1</td><td>b2</td><td>b3</td></tr>
  <tr><td>c1</td><td>c2</td><td>c3</td></tr>
</table>

</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#btn1').click(function(){

//変数定義

var arr = [];

var obj = {};

//テーブルの値をObject配列に格納する

$("tr").each(function(i){

obj = new Object();

$(this).children().each(function(j){

obj[j] = $(this).text();

});

arr.push(obj);

});

//コンソールに出力してみる

console.log(arr);

});

</script>

</head>

<body>

<table>

</table>

</body>

</html>

（結果）: [ {0:"a1", 1:"a2", 2:"a3"}, {0:"b1", 1:"b2", 2:"b3"}, {0:"c1", 1:"c2", 2:"c3"} ]

解説

テーブル１行を１オブジェクトとした配列を生成します

執筆者：とら