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


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

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

社員リスト

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

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

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

回答の条件
  • 1人2回まで
  • 登録:2009/09/06 17:03:52
  • 終了:2009/09/06 18:49:36

ベストアンサー

id:y-kawaz No.1

y-kawaz回答回数1420ベストアンサー獲得回数2252009/09/06 17:32:41

ポイント100pt

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>
id:ruijio

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

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で取得できました!

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

2009/09/06 18:48:29

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません