![](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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- Perl PERL 1 2022/04/26 14:15
- MySQL SQL任意に並び替えをしたい 2 2023/08/28 10:47
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
クリックされた罫表セルの行番...
-
特定<table>内の<td>の色を変える
-
jQueryでクリックされたテーブ...
-
tableの任意行にfocusをあてる
-
一覧から選択した行の行番号を...
-
innerHTML内では改行は禁止?
-
javascriptでクイズ
-
複数Formから値を取得するやりかた
-
slickのレスポンシブ > center...
-
Nameは配列で、チェックされた...
-
submitした値を返したい
-
Cookieに保存されない
-
同一nameの input type="text"...
-
Selectの中身をfor文で入れる
-
インラインフレームから親ウィ...
-
Selectボックスの幅を自動で広...
-
クリックさせたいが、click()が...
-
name属性が同じフォームが複数...
-
プルダウン 項目が多いので先頭...
-
プルダウンの選択内容を次のペ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
プルダウンで選択すると、DBの...
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
特定<table>内の<td>の色を変える
-
JavaScriptで特定のtdタグにcla...
-
至急!GetElementById でtdの...
-
マウスをブラウザの外に出した...
-
【UWSC】HTML内のある部分を抽...
-
スクロールバーの表示位置を変...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
動的なtableの値を取得したい
-
特定の文字列を挿入
-
テーブル内に表示されている数...
-
javascript クリックすると、あ...
-
テーブルの項目の値取得
-
javascriptで質問です。 displa...
-
Tablesorteを2行一組でソートする
-
\\u30ad\\u30fc\\u30dc・・・と...
おすすめ情報