jQueryでクリック要素の属性を取得してみる

テーブルの各行にボタンを配置し、どのボタンがクリックされたのかを

JavaScript側で判断したく、クリック要素の属性を取得する方法を探して対応したので書いておきます。

 

jQueryやJavaScript、あんまり慣れてないもんで、

これぐらいのこともサクッとできませんでした＾＾；

 

 

こんな感じのテーブルがあります。

1. <table>
2.   <tr>
3.     <td>ユーザー1</td>
4.     <td><input type="button" class="btn_show" id="btn_show_1" value="表示"></td>
5.   </tr>
6.   <tr>
7.     <td>ユーザー2</td>
8.     <td><input type="button" class="btn_show" id="btn_show_2" value="表示"></td>
9.   </tr>
10. </table>

 

以下のようにすれば、どのボタンが押されたのかわかります。

各行のボタンをclass属性でグループ化して、clickハンドラに紐付け、

$(this)を使ってボタンの属性を取得しちゃいます。

1. $(".btn_show").click(function(event) {
2.     var btnid  = $(this).attr("id");
3.     var userid = btnid.replace('btn_show_', '');
4.     alert("ユーザーID: " + userid);
5. }

 

 

まあ、onClick属性に直接idを書けば対応できますが、

そういう書き方は少しずつ止めていきたいということでｗ