jQuery クリックした行を配列化したい

Question

列1	列2	列3
A	AA	AAA
B	BB	BBB
C	CC	CCC

上のような表があるとして、例えば2列目をクリックすると、2列目のデータをすべて格納した配列にしたいです。
ロジックの流れは大まかに以下だと考えました。
0. 列数取得
0. クリックした行から列数分だけセルの値を取得
0. 取得した値を配列に格納

列数はとりあえず以下の方法で取得できました。ですがそこから先について、数十分調べて解決しなかったため、質問させていただきました。

$('#table').on("click", "tr", function(event){    

    //列数取得
    var columnNum = $('#table')[0].rows[0].cells.length;

    //ここからのコーディング例が知りたいです。

});

知りたいことは、

• 列数分だけセルの値を取得し、配列に格納する方法
• （できれば）列数の取得について、選択行の列数を取得する方法

をご教示願いたいです。よろしくお願いいたします。

Comments

[yambejp]

列とは縦軸のことだと思いますが間違いないですか？それとも行？またcolspanやrowspanはされていない前提でOKでしょうか？

[cafeore_nmti]

コメントいただきありがとうございます。縦軸で間違いないです。また、今回は列や行の結合は無しで構いません。よろしくお願いいたします。

Answer 1

列

<script>
$(function(){
  $('#t1 th,#t1 td').on('click',function(){
    var idx=$(this).closest('tr').find('th,td').index(this);
    var arr=$('#t1 tr').map(function(x){
      return $(this).find('th,td').filter(':eq('+idx+')').text();
    }).get();
    console.log(arr);
  });
});
</script>
<table id="t1" border>
<thead>
<tr><th>列1</th><th>列2</th><th>列3</th></tr>
</thead>
<tbody>
<tr><td>A</td><td>AA</td><td>AAA</td></tr>
<tr><td>B</td><td>BB</td><td>BBB</td></tr>
<tr><td>C</td><td>CC</td><td>CCC</td></tr>
</tbody>
</table>

行

<script>
$(function(){
  $('#t1 th,#t1 td').on('click',function(){
    var arr=$(this).closest('tr').find('th,td').map(function(){
      return $(this).text();
    }).get();
    console.log(arr);
  });
});
</script>
<table id="t1" border>
<thead>
<tr><th>列1</th><th>列2</th><th>列3</th></tr>
</thead>
<tbody>
<tr><td>A</td><td>AA</td><td>AAA</td></tr>
<tr><td>B</td><td>BB</td><td>BBB</td></tr>
<tr><td>C</td><td>CC</td><td>CCC</td></tr>
</tbody>
</table>

Comments

[cafeore_nmti]

すみません、こちらの勘違いで補足が異なりました。
配列化したいのは列ではなく"行"でした。

[yambejp]

行はもっと簡単、追記しておきました

[cafeore_nmti]

ありがとうございます。参考にさせていただきます。

[cafeore_nmti]

いただいたコードを大体理解し、思った通りに実装できました。ありがとうございます。
実装時、「後からボタンで追加した行をクリックするとイベントが発生しない」事象に遭いましたが、下記記事にて無事解決しました。
ありがとうございました。
https://qiita.com/shizuma/items/d561f37f864c3ebb5096