Edited at

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;
}

ご指摘ありがとうございます。上記のプログラミングは、一般的お作法に従っていません。私のプログラミングフィンガープリントです。

連想記憶術で頭にしまうために上記のようなコーディングになっています。

私は、jsでコーディングするときに改行やタブを使いません。

ご指摘のように見やすくインデントすると


code.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"],