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

2018年9月6日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