JavaScript
jQuery
editable-table

Table の値取得 jquery (jqueryには、jqueryの立場がある)

他の記事を見ていたらふとコーディングした。
getdata.PNG

テーブルに表示したデータの取得

テストデータ

data.html
   <table id='table' class="table table-sm table-bordered table-striped table-responsive-sm table-hover w-100 h-60">
    <thead><tr>
   <th>ID</th>
   <th>名前</th>
   <th>名前フリガナ</th>
   <th>性別</th>
   <th>血液型</th>
   <th>生年月日</th>
   <th>電話番号</th>
   <th>携帯番号</th>
   <th>メール</th>
    </tr></thead>
    <tr>
   <td>1</td>
   <td>関波子</td>
   <td>セキナミコ</td>
   <td></td>
   <td>AB</td>
   <td>1980/07/31</td>
   <td>03-3060-4716</td>
   <td>090-7787-3784</td>
   <td>sk@eaccess.net</td>
   </tr>
    <tr>
   <td>2</td>
   <td>小倉準司</td>
   <td>コクラジュンジ</td>
   <td></td>
   <td>A</td>
   <td>1973/10/08</td>
   <td>0166-36-3522</td>
   <td></td>
   <td>junzi-kokura@eaccess.net</td>
   </tr>
    <tr>
   <td>3</td>
   <td>西村有紀子</td>
   <td>ニシムラユキコ</td>
   <td></td>
   <td>O</td>
   <td>1972/12/05</td>
   <td>0745-67-2723</td>
   <td>090-5165-2074</td>
   <td>okikuy1972@livedoor.com</td>
   </tr>
    <tr>
...........................................省略

jqueryの立場でコーディングすると

getdata.js
  function getData(){
        var d=[];$('table tr').each(function(i, e){
         var dd=[]; if (i===0) $(this).find('th').each(function(j, el){dd.push($(this).text())}); 
                     else $(this).find('td').each(function(j, el){dd.push($(this).text())});
         d.push(dd);
        });
   return d;
  }

結果は、以下の通りです。

[["ID","名前","名前フリガナ","性別","血液型","生年月日","電話番号","携帯番号","メール"],
["1","関波子","セキナミコ","女","AB","1980/07/31","03-3060-4716","090-7787-3784","sk@eaccess.net"],
["2","小倉準司","コクラジュンジ","男","A","1973/10/08","0166-36-3522","","junzi-kokura@eaccess.net"],
["3","西村有紀子","ニシムラユキコ","女","O","1972/12/05","0745-67-2723","090-5165-2074","okikuy1972@livedoor.com"],