Q&A
ご自身で書かれたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
HTMLで作成したWEB画面に表を２つ作成し、片方の表で選択（ラジオボタンで選択）した行を表の近くに配置したbutton押下のタイミングで、もう片方の表に追加を行う機能を実装したいのですが、実装方法が不明で困っております。
下記に２つの表の細かい機能を示しますので、どれか一つの機能で良いので、わかる方を教えていただけると嬉しいです。
・表１
・複数の行を表示。（ここはわかります。）
・表２に追加された行がない場合は、表１で行を選択し、button押下のタイミングで表２の１行目に追加
・表２に１行追加されている場合は、表１で行を選択し、button押下のタイミングで 表２の２行目に追加
・表２に２行追加されている場合は、表１でbutton押下した際に、注意のダイアログを表示
<table class="sample" style="margin-top: 50px" id="test2"> <thead> <tr> <th></th> <th>ファイル名</th> <th>時間</th> </thead> <tbody id="select"> <tr> <td><input type="radio" name="check" value="check"></td> <td>sample1</td> <td>00:00:00</td> </tr> <tr> <td><input type="radio" name="check" value="check"></td> <td>sample2</td> <td>00:00:00</td> </tr> </tbody> </table> <button type="submit" id="aaa" name="bbb" class="cc" style="color: #ffffff; background-color: #40b740; margin-top: 20px;">追加</button>
・表２
・表２に追加された行が１行以上存在する場合、チェックボックス選択後、button押下で表から削除。
<div class="table-responsive cncList"> <table class="sample" id="test"> <thead> <tr> <th></th> <th>ファイル名</th> <th>時間</th> </thead> <tbody id="result"> <tr> <td><input type="checkbox" name="checkbox" value="1"></td> <td></td> <td></td> </tr> <tr> <td><input type="checkbox" name="checkbox" value="2"></td> <td></td> <td></td> </tr> </tbody> </table> <button type="submit" id="aaa" name="bbb" class="cc" style="color: #ffffff; background-color: #40b740; margin-top: 20px;">削除</button>
以上です。よろしくお願いいたします。
イメージを画像で添付いたします
ご指摘ありがとうございます。コードを追加いたしました。
「button」が無いですが、tr各行に有るのでしょうか。また、同じ行について「ボタン」が押された場合2行追加するのでしょうか。もう少し具体的にフローを書かれたほうが良いと思います。
>>同じ行について「ボタン」が押された場合2行追加するのでしょうか。 これは同じ行を複数回追加することは可能かどうかという質問でしょうか？ もしそうであれば答えは可能です。
回答1件
0
ベストアンサー
雛形が見当たらなかったので、文章からの想像で作ってみました。
HTML
1<!DOCTYPE html> 2<!-- HTMLで作成したWEB画面に表を２つ作成し、片方の表で選択（ラジオボタンで選択）した行を表の近くに配置したbutton押下のタイミングで、もう片方の表に追加を行う機能を実装したいのですが、実装方法が不明で困っております。 3下記に２つの表の細かい機能を示しますので、どれか一つの機能で良いので、わかる方を教えていただけると嬉しいです。 4 5・表１ 6・複数の行を表示。（ここはわかります。） 7・表２に追加された行がない場合は、表１で行を選択し、button押下のタイミングで表２の１行目に追加 8・表２に１行追加されている場合は、表１で行を選択し、button押下のタイミングで 表２の２行目に追加 9・表２に２行追加されている場合は、表１でbutton押下した際に、注意のダイアログを表示 10 11・表２ 12・表２に追加された行が１行以上存在する場合、チェックボックス選択後、button押下で表から削除。 --> 13<html lang="ja"> 14 <head> 15 <meta charset="utf-8"> 16 <title>addlist</title> 17 <style media="screen"> 18 ul { 19 list-style-type: none; 20 } 21 div.wrapper { 22 position: relative; 23 overflow:hidden; 24 } 25 div.list1{ 26 display: inline-block; 27 float: left; 28 } 29 div.list2{ 30 display: inline-block; 31 } 32 div.btn { 33 text-align: center; 34 } 35 </style> 36 <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 37 </head> 38 <body> 39 <div class="wrapper"> 40 <div class="list1"> 41 <h3>表1</h3> 42 <ul id="select"> 43 <li><label><input type="radio" name="list1" value="hoge" checked>どれか</label></li> 44 <li><label><input type="radio" name="list1" value="hoge">選ぶと</label></li> 45 <li><label><input type="radio" name="list1" value="hoge">追加される</label></li> 46 </ul> 47 <div class="btn"> 48 <input type="button" value="add"> 49 </div> 50 </div> 51 <div class="list2"> 52 <h3>表2</h3> 53 <ul id="result"> 54 </ul> 55 </div> 56 </div> 57 <script type="text/javascript"> 58 $(function(){ 59 $(".list1 input[type='button']").on("click", function(){ 60 var add_text = $("#select").find("input:checked").parent().text(); 61 if($("#result").children().length < 3){ 62 $("#result").append($("<li>").text(add_text)); 63 } else { 64 alert("むりだよ！") 65 } 66 }) 67 }) 68 </script> 69 </body> 70</html> 71
追記：
質問文を読み直したところ、足りない機能があったので追加しました。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>addlist</title> 6 <style media="screen"> 7 ul { 8 list-style-type: none; 9 } 10 div.wrapper { 11 position: relative; 12 overflow:hidden; 13 } 14 div.list1{ 15 display: inline-block; 16 float: left; 17 } 18 div.list2{ 19 display: inline-block; 20 } 21 div.btn { 22 text-align: center; 23 } 24 </style> 25 <script src="https://code.jquery.com/jquery-3.2.1.js"></script> 26 </head> 27 <body> 28 <div class="wrapper"> 29 <div class="list1"> 30 <h3>表1</h3> 31 <ul id="select"> 32 <li><label><input type="radio" name="list1" value="hoge" checked>どれか</label></li> 33 <li><label><input type="radio" name="list1" value="hoge">選ぶと</label></li> 34 <li><label><input type="radio" name="list1" value="hoge">追加される</label></li> 35 </ul> 36 <div class="btn"> 37 <input type="button" value="add"> 38 </div> 39 </div> 40 <div class="list2"> 41 <h3>表2</h3> 42 <ul id="result"> 43 </ul> 44 <div class="btn"> 45 <input type="button" value="remove"> 46 </div> 47 </div> 48 </div> 49 <script type="text/javascript"> 50 $(function(){ 51 $(".list1 input[type='button']").on("click", function(){ 52 var add_text = $("#select").find("input:checked").parent().text(); 53 if($("#result").children().length < 2){ 54 var listitem = "<li><label><input type='radio' name='list2'>"+add_text+"</label></li>" 55 $("#result").append(listitem); 56 } else { 57 alert("むりだよ！") 58 } 59 }) 60 61 $(".list2 input[type='button']").on("click", function(){ 62 $("#result").find("input:checked").closest("li").remove(); 63 }) 64 }) 65 </script> 66 </body> 67</html> 68
投稿2017/04/09 13:41
編集2017/04/09 14:04
総合スコア138
ご回答ありがとうございます。
完全に私の言葉足らずでしたが、ラジオボタンは追加を行わず2列目からの情報を追加したいです。
申し訳ありません。
もし、わかるようでしたら、教えていただけると幸いです。
欲しい情報のところにidかclassを付けて選別して、textを抜き出し、それをテーブルに入れてやればいけますよ。
消すときは、チェックの付いた要素をremoveしてやって、新たに新しい要素を追加してやればいいと思います。
コメント欄で読みづらいですが、javascriptのコードだけ載せときます。参考にどうぞ。<td>にclass=filename と class=time を追加しています。
<script type="text/javascript">
$(function(){
var LIST_NUM=2;
$("#add").on("click", function(){
var filename = $("#select").find("input:checked").parent().siblings(".filename").text();
var time = $("#select").find("input:checked").parent().siblings(".time").text();
var $tr = $("#result tr")
$tr.each(function(i){
var $elem = $(this);
if($elem.find(".filename").text()===""){
$elem.find(".filename").text(filename);
$elem.find(".time").text(time);
return false;
}
if(i===LIST_NUM-1){
alert("もうむり！");
}
})
})
$("#remove").on("click", function(){
var add_elem='<tr><td><input type="checkbox" name="checkbox" value="2"></td>'+
'<td class="filename"></td><td class="time"></td></tr>'
$("#result").find("input:checked").closest("tr").remove();
while($("#result").children().length!==LIST_NUM){
$("#result").append(add_elem);
}
})
})
</script>
ご回答ありがとうございました。
勉強不足のため、理解しきれていないため、似たような質問を上げるかもしれませんが、よろしくお願い致します。
あなたの回答
tips
プレビュー
