🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

11007閲覧

【HTML】radioのlabelの中にtrを入れることで、trをクリックすると選択されるようにしたい

holly0819

総合スコア17

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/10/30 01:44

編集2019/10/30 01:47

環境

  • HTML5

前提・実現したいこと

ラジオボタンとlabelを用意し、labelの中にtrタグを入れることでtrをクリックするとラジオボタンが選択されるような仕組みを作っています。

発生している問題

しかし、labelの中にtrタグを入れるとlabelがtableタグの前に押し出されてしまいます。

調べてみたのですが、参考になりそうな情報は見つからず途方に暮れています。

ご助言頂けないでしょうか。

該当のソースコード

以下のコードの時、trタグをクリックするとラジオボタンが選択される状態になることを期待しています。

html

1<table> 2 <thead> 3 <tr> 4 <th>名前</th> 5 <th>説明</th> 6 </tr> 7 </thead> 8 <tbody> 9 <label> 10 <tr> 11 <input type='radio' name='user' value='1'> 12 <td>名前1</td> 13 <td>説明1</td> 14 </tr> 15 </label> 16 <label> 17 <tr> 18 <input type='radio' name='user' value='2'> 19 <td>名前2</td> 20 <td>説明2</td> 21 </tr> 22 </label> 23 </tbody> 24</table>

しかし、ブラウザで開くとlabelとinputがtableの前に押し出されてしまい、tdタグをクリックしても何も反応はありません。

html

1<!-- labelとinputが前に出てきている --> 2<label> 3 <input type='radio' name='user' value='1'> 4</label> 5<label> 6 <input type='radio' name='user' value='2'> 7</label> 8<table> 9 <thead> 10 <tr> 11 <th>名前</th> 12 <th>説明</th> 13 </tr> 14 </thead> 15 <tbody> 16 <tr> 17 <td>名前1</td> 18 <td>説明1</td> 19 </tr> 20 <tr> 21 <td>名前2</td> 22 <td>説明2</td> 23 </tr> 24 </tbody> 25</table>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

labelの中にtrタグを入れることでtrをクリックするとラジオボタンが選択されるような仕組みを作っています。

そのままでは無理です。テーブル系のタグはネストできるものが決まっていますので、<table>の内側で<td><th>の外側には、<input><label>など、テーブルとは無関係なものを置くことができません。

JavaScriptで「<tr>をクリックしたら特定の<input>を選択する」ようなコードを書くほかないと思います。

投稿2019/10/30 01:49

maisumakun

総合スコア145971

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

holly0819

2019/10/30 01:52

回答ありがとうございます。 わかりました。JavaScriptを使ってみます。
guest

0

tdの中にlabelを巻くとうまくいきませんか?
ちょっと違いますがこちら参考になりませんか?

投稿2019/10/30 01:57

kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kyoya0819

2019/10/30 01:57

もう解決済みでした...
holly0819

2019/10/30 06:02

回答ありがとうございます。 tdの中だとlabelがうまく動作するのですが、今回はどうしてもtrの中に入れたかったのでJavaScriptを使うことにしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問