![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
テーブルの行ごとにボタンが設置してあり、これをクリックした時にクリックした行の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ベストアンサー
- 回答日時:
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>の中身を変数の中に保存しておきたいのでこのような処理が必要になりました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
至急!GetElementById でtdの...
-
ハイパーリンクを別ウインドウ...
-
TD内のチェックボックスの位置...
-
「オブジェクトは、このプロパ...
-
マウスをブラウザの外に出した...
-
特定<table>内の<td>の色を変える
-
チェックボックスにチェックが...
-
Jquery on click 発火しない
-
【JQuery】テーブルで行選択さ...
-
【UWSC】HTML内のある部分を抽...
-
JSで、テーブルのある行のみ、...
-
<JavaScript>tableタグを入力不...
-
<input>の選択肢をプルダウンメ...
-
return trueとreturn falseの用...
-
コピペを禁止するtextarea
-
javascriptでセレクトボックス...
-
未入力のラジオボタンに、alert...
-
value内に変数を入れたい
-
ASP エラーチェック VBScript
-
onchangeイベントを強制的に発...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
一覧から選択した行の行番号を...
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
スクロールバーの表示位置を変...
-
【UWSC】HTML内のある部分を抽...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
HTML中のTABLEのデータを抽出す...
-
テーブルの項目の値取得
-
【JQuery】テーブルで行選択さ...
-
階層式メニューをtableタグ内に
-
javascript クリックすると、あ...
-
JavaScriptでテーブルをクリッ...
-
jquery datatablesを使用 イン...
-
「オブジェクトは、このプロパ...
-
jqueryで表に連番No.を追加したい
おすすめ情報