質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

Q&A

解決済

2回答

2934閲覧

セレクトボックスの編集切り替えがうまくできない

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

0グッド

0クリップ

投稿2016/06/25 14:12

イメージ説明
イメージ説明
以上のように編集ボタンを押すとセレクトボックスが出てくるようにしたいです。
イメージ説明
そして下の編集ボタンを押すと、上のセレクトボックスが無効になり、編集ボタンを押した隣のところがセレクトボックスになるようにしたいです。
考えてもなかなか仕様が思いつかず、困っている状態です。

「こうした方がいいよ」みたいなアドバイスをもらえると嬉しいです。お願いします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

単純にセレクトボックスのdisabledを切り替えたらどうでしょうか

ボタンのdisabled切り替え例

Javascript

1<body> 2 <input type="button" value="スタート" id="start"> 3 <input type="button" value="ストップ" id="stop" disabled> 4</body> 5 6<script language="javascript"> 7document.getElementById("start").onclick = function() { 8 // 無効化 9 document.getElementById("start").disabled = "true"; 10 // 有効化 11 document.getElementById("stop").disabled = ""; 12}; 13 14document.getElementById("stop").onclick = function() { 15 document.getElementById("start").disabled = ""; 16 document.getElementById("stop").disabled = "true"; 17}; 18</script>

http://www.m-bsys.com/code/javascript-disabled

例はボタンですが、読み替えてください。

投稿2016/06/25 14:21

編集2016/06/26 01:35
azurite2016

総合スコア69

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

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

退会済みユーザー

退会済みユーザー

2016/06/25 14:27

アドバイスありがとうございます。disabledの存在を知らなかったので参考になりました。
退会済みユーザー

退会済みユーザー

2016/06/25 14:31

一応javascriptを使ってボタンイベントでフラグで切り替えたいと考えています。 いざとソースに書こうと思うと、どう書けばよういのかいまいちピンときません。 javascriptを使ったdisabledの切り替えの仕方がわかれば、アドバイスくれると嬉しいです。
azurite2016

2016/06/26 01:36

例を追記してみました
退会済みユーザー

退会済みユーザー

2016/06/27 00:37

ありがとうございます。試してみましたが、うまくできたようです。
guest

0

CSSとJavaScript(jQuery)で簡単に考え方がわかるように書いてみました。
.editableというクラスを選択中の要素に追加し、制御を行なっています。

また、確定状態にした際にその値を表示させるためにtd内に余計な要素を追加するのが嫌だったので、
td[data-value]を設定し、その値をcssで表示させるようにしています。

一応質問の挙動にはなっているかと思いますが、一度「編集」ボタンを押して値が編集できる状態で再度同じ「編集」ボタンを押してもなにも起こらないので、「決定」ボタンなどに変えて値を確定させることができるような機能をつけてみてもよいかもしれません(なくても問題はないです笑)。
回答のコードにも更に工夫の余地はあるかと思いますが、同じような考え方で上述のようなボタンの機能やラベルを制御してみると、コードを書きながら考え方が身につくのではないでしょうか。

<table> <tr> <th colspan="3">heading</th> </tr> <tr> <td>名前A</td> <td class="status" data-value="普通"> <select name="" id=""> <option value="普通">普通</option> <option value="元気">元気</option> </select> </td> <td> <button>編集</button> </td> </tr> <tr> <td>名前B</td> <td class="status" data-value="普通"> <select name="" id=""> <option value="普通">普通</option> <option value="元気">元気</option> </select> </td> <td><button>編集</button></td> </tr> </table>
<style type="text/css"> select { display: none; } td.status:not(.editable):before { content: attr(data-value); } </style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $("button").click(function() { // 一度すべてのselectの状態を取得して反映&状態をリセット $('td').each(function() { $(this).removeClass('editable'); var select = $(this).find('select'); $(this).attr('data-value', select.val()); select.hide(); }) // 選択したボタンの隣接するselectを編集可能に var td = $(this).parent().prev(); var select = td.find('select'); td.addClass('editable'); select.show(); }); </script>

投稿2016/06/25 15:16

obi_yuta

総合スコア121

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

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

退会済みユーザー

退会済みユーザー

2016/06/25 15:24

ご回答ありがとうございます。jQueryは使っていないので、ダウンロードして使ってみます。
obi_yuta

2016/06/25 15:27

すいません、サボってjQuery使ってしまいましたー。 jQueryを使わずに書く場合でも考え方は同じですので、この実装で問題がなければJavaScriptで書きなおしてみてください。 ※とりあえず試すだけであれば下記で使えるようになりますよ <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問