LoginSignup
15
13

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-11

他の記事を見ていたらふとコーディングした。
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"],
15
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
13