人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQuery(javaScript)を用いて、動的な「社員情報閲覧&編集」ページを作成しております。

そこで躓いたのですが、jQuery(またjavaScriptでもかまいません)にて、親要素にアクセスするにはどうすればよいのでしょうか?

具体的には、動きとしてはヤフーやグーグルカレンダーのようなものを作りたいと思います。

社員リスト

社員番号
名前
年齢
住所
などなど

で一行とし、複数行を持つテーブルで、trのID属性に、データベースのキーとなる情報が入ってます。
編集可能なtdには全てclickイベントを定義し、クリック時に親要素のtrにアクセスし、そこのidやclassの属性値を取得したりしたいのです。

よろしくお願いいたします。

●質問者: ruijio
●カテゴリ:インターネット ウェブ制作
✍キーワード:Class Click JavaScript jQuery アクセス
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● y-kawaz
●100ポイント ベストアンサー

closest が使えると思います。

この関数は、開始要素から最も近い親要素を選択します。引数にセレクター書式を指定した場合、マッチする最も近い親要素を返します。

↓多分こういうことがしたいんですよね?

<html> 
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('td').click(function(){
 alert($(this).closest('tr').get(0).id);
 });
});
</script>
</head>
<body>
<table>
<tr id="row1"><td>あいうえお</td><td>123</td></tr>
<tr id="row2"><td>かきくけこ</td><td>456</td></tr>
<tr id="row3"><td>さしすせそ</td><td>789</td></tr>
</table>
</body>
</html>
◎質問者からの返答

まさにこのような事がしたかったのです。ありがとうございます。

classも取得できるかなと思い、

alert($(this).closest('tr').get(0).class);

としましたが、駄目で、

alert($(this).closest('tr').get(0).attr('class');

としても駄目。

$(this).closest('tr').get(0)

が保持しているプロパティやメソッドを見てみようと思い、下記を実行してみました。

var a = $(this).closest('tr').get(0);

for(prop in a){

$("dl").append("

" + prop + "
"+a[prop]+"
");

}

すると、classNameというプロパティに格納されているっぽいので、

alert($(this).closest('tr').get(0).className);

でOKでした!

他の属性に関しても、(例えばalignならば)

alert($(this).closest('tr').get(0).getAttribute('align'));

とgetAttributeで取得できました!

非常にためになりました!有難うございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ