HTMLで作成したWEB画面に表を2つ作成し、片方の表で選択(ラジオボタンで選択)した行を表の近くに配置したbutton押下のタイミングで、もう片方の表に追加を行う機能を実装したいのですが、実装方法が不明で困っております。
下記に2つの表の細かい機能を示しますので、どれか一つの機能で良いので、わかる方を教えていただけると嬉しいです。
・表1
・複数の行を表示。(ここはわかります。)
・表2に追加された行がない場合は、表1で行を選択し、button押下のタイミングで表2の1行目に追加
・表2に1行追加されている場合は、表1で行を選択し、button押下のタイミングで 表2の2行目に追加
・表2に2行追加されている場合は、表1で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>
・表2
・表2に追加された行が1行以上存在する場合、チェックボックス選択後、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>
以上です。よろしくお願いいたします。
イメージを画像で添付いたします
回答1件
あなたの回答
tips
プレビュー