以上のように編集ボタンを押すとセレクトボックスが出てくるようにしたいです。
そして下の編集ボタンを押すと、上のセレクトボックスが無効になり、編集ボタンを押した隣のところがセレクトボックスになるようにしたいです。
考えてもなかなか仕様が思いつかず、困っている状態です。
「こうした方がいいよ」みたいなアドバイスをもらえると嬉しいです。お願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答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総合スコア69
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
総合スコア121
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/25 15:27
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/06/25 14:27
退会済みユーザー
2016/06/25 14:31
2016/06/26 01:36
退会済みユーザー
2016/06/27 00:37