[jQuery] クリックしたテーブルの列と同じ列にある値を取得する

2020年3月8日ITjquery

下記のようなテーブル構造で「ゲッツ!」をクリックした時にクリックしたゲッツの列に応じて、id, 名前、カナをJavaScriptで取得する書き方を調べました。

 jquery-getting-table-row-value1.png

test.html


    
        
        
    
    

    

# 名前 カナ 編集
1 山田太郎 ヤマダタロウ ゲッツ!
2 鈴木一郎 スズキイチロウ ゲッツ!
3 山田花子 ヤマダハナコ ゲッツ!
4 田中三郎 タナカサブロウ ゲッツ!

See the Pen JBOdyw by 原田順啓 (@nobuhiro_harada) on CodePen.

$(this) でクリックした class hoge を取得し、、
最も近い親要素の tr を 取得し、、
その子要素 の td を取得し、、

td はこんな感じですね。

jquery-getting-table-row-value2.png

さらに何番目の td かを指定して、その innerText を取得します。

タラタラと書きましたが、プログラムで書くとこの一行で済みます。

$id = $(this).closest('tr').children("td")[0].innerText;

以上になります。

ひとこと

なんだかんだで jQuery は便利ですよね。

スポンサーリンク

Posted by nobuhiro harada