jQueryでクリックされたテーブルの行のHTMLを取得する方法

テーブルの行ごとにボタンが設置してあり、これをクリックした時にクリックした行のHTMLを変数に代入したいです。

「HTMLデータ」

<table>
<tr class="ipt2">
<td>2</td><td>太郎</td><td>たろう</td>
<td width=""><button class="tblButton" name="2"></button></td>
</tr>

<tr class="ipt3"><td>3</td><td>花子</td><td>はなこ</td>
<td width=""><button class="tblButton" name="3"></button></td>
</tr>
</table>




「求める結果」

1つ目（<tr>ごと取得する）
str1='<tr class="ipt2"><td>2</td><td>太郎</td><td>たろう</td><td width=""><button class="tblButton" name="2"></button></td></tr>';

2つ目（<tr>は取得せず、中身の<td>だけ取得する）
str2='<td>2</td><td>太郎</td><td>たろう</td><td width=""><button class="tblButton" name="2"></button></td>';


「作成中のjQuery」

$(document).on('click', '.tblButton', function () {
tblid = ($(this).attr('name')); //ボタンのnameの値はこれで取得できています。
}


ご回答よろしくお願い致します。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2015/08/18 15:04

HTMLソースそのものを切り出すのは、少々面倒な手順になると思います。

　1.表示中のソースをスクリプトで読み込む
　2.HTMLを解釈し、該当する部分を探す
　3.文字列として、対象とする部分を切り出す
といった感じになるかと。


文字列として取得する目的が良くわかりませんが、比較的簡単な代替案として、（ソースそのものとは異なりますが）表示中のDOMのHTMLを取り出す例を以下に。
$(document).on('click', '.tblButton', function(){
　var tr = $(this).parents("tr:first");
　var str2 = tr.html();
　var str1 = tr.get(0).outerHTML;

　alert("str1=\n" + str1);
　alert("str2=\n" + str2);
});

※jQueryには要素を含むHTML取得のメソッドが見当たらなかったので（あるのかもしれませんが）、outerHTMLを利用しています。

この回答へのお礼

fujillin様

ご回答ありがとうございます。
求める結果になりました。

文字列として取得する目的を記載しますと、

Ajaxをつかってテーブルのその場編集を作っており、編集ボタンが押された時に<tr>の中身を編集フォームの内容に切り替えています。途中でキャンセルボタンを押した時に、<tr>の内容を元のデータに戻すため、<tr>の中身を変数の中に保存しておきたいのでこのような処理が必要になりました。

お礼日時：2015/08/18 17:02