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

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

ただいまの
回答率

90.50%

  • JavaScript

    16444questions

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

  • Java

    13803questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • HTML

    8988questions

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

  • jQuery

    6715questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTMLで作成した表の行追加機能(ボタン押下のタイミング)

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 721

hide09090909

score 49

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>

以上です。よろしくお願いいたします。
イメージを画像で添付いたします

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hide09090909

    2017/04/11 16:18

    ご指摘ありがとうございます。コードを追加いたしました。

    キャンセル

  • kei344

    2017/04/11 16:54

    「button」が無いですが、tr各行に有るのでしょうか。また、同じ行について「ボタン」が押された場合2行追加するのでしょうか。もう少し具体的にフローを書かれたほうが良いと思います。

    キャンセル

  • hide09090909

    2017/04/11 17:04

    >>同じ行について「ボタン」が押された場合2行追加するのでしょうか。 これは同じ行を複数回追加することは可能かどうかという質問でしょうか?  もしそうであれば答えは可能です。

    キャンセル

回答 1

checkベストアンサー

+1

雛形が見当たらなかったので、文章からの想像で作ってみました。

<!DOCTYPE html>
<!-- HTMLで作成したWEB画面に表を2つ作成し、片方の表で選択(ラジオボタンで選択)した行を表の近くに配置したbutton押下のタイミングで、もう片方の表に追加を行う機能を実装したいのですが、実装方法が不明で困っております。
下記に2つの表の細かい機能を示しますので、どれか一つの機能で良いので、わかる方を教えていただけると嬉しいです。

・表1
・複数の行を表示。(ここはわかります。)
・表2に追加された行がない場合は、表1で行を選択し、button押下のタイミングで表2の1行目に追加
・表2に1行追加されている場合は、表1で行を選択し、button押下のタイミングで 表2の2行目に追加
・表2に2行追加されている場合は、表1でbutton押下した際に、注意のダイアログを表示

・表2
・表2に追加された行が1行以上存在する場合、チェックボックス選択後、button押下で表から削除。 -->
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>addlist</title>
        <style media="screen">
            ul {
                list-style-type: none;
            }
            div.wrapper {
                position: relative;
                overflow:hidden;
            }
            div.list1{
                display: inline-block;
                float: left;
            }
            div.list2{
                display: inline-block;
            }
            div.btn {
                text-align: center;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <div class="list1">
                <h3>表1</h3>
                <ul id="select">
                    <li><label><input type="radio" name="list1" value="hoge" checked>どれか</label></li>
                    <li><label><input type="radio" name="list1" value="hoge">選ぶと</label></li>
                    <li><label><input type="radio" name="list1" value="hoge">追加される</label></li>
                </ul>
                <div class="btn">
                    <input type="button" value="add">
                </div>
            </div>
            <div class="list2">
                <h3>表2</h3>
                <ul id="result">
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            $(function(){
                $(".list1 input[type='button']").on("click", function(){
                    var add_text = $("#select").find("input:checked").parent().text();
                    if($("#result").children().length < 3){
                        $("#result").append($("<li>").text(add_text));
                    } else {
                        alert("むりだよ!")
                    }
                })
            })
        </script>
    </body>
</html>

追記:
質問文を読み直したところ、足りない機能があったので追加しました。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>addlist</title>
        <style media="screen">
            ul {
                list-style-type: none;
            }
            div.wrapper {
                position: relative;
                overflow:hidden;
            }
            div.list1{
                display: inline-block;
                float: left;
            }
            div.list2{
                display: inline-block;
            }
            div.btn {
                text-align: center;
            }
        </style>
        <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <div class="list1">
                <h3>表1</h3>
                <ul id="select">
                    <li><label><input type="radio" name="list1" value="hoge" checked>どれか</label></li>
                    <li><label><input type="radio" name="list1" value="hoge">選ぶと</label></li>
                    <li><label><input type="radio" name="list1" value="hoge">追加される</label></li>
                </ul>
                <div class="btn">
                    <input type="button" value="add">
                </div>
            </div>
            <div class="list2">
                <h3>表2</h3>
                <ul id="result">
                </ul>
                <div class="btn">
                    <input type="button" value="remove">
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function(){
                $(".list1 input[type='button']").on("click", function(){
                    var add_text = $("#select").find("input:checked").parent().text();
                    if($("#result").children().length < 2){
                        var listitem = "<li><label><input type='radio' name='list2'>"+add_text+"</label></li>"
                        $("#result").append(listitem);
                    } else {
                        alert("むりだよ!")
                    }
                })

                $(".list2 input[type='button']").on("click", function(){
                    $("#result").find("input:checked").closest("li").remove();
                })
            })
        </script>
    </body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/11 16:19

    ご回答ありがとうございます。
    完全に私の言葉足らずでしたが、ラジオボタンは追加を行わず2列目からの情報を追加したいです。
    申し訳ありません。
    もし、わかるようでしたら、教えていただけると幸いです。

    キャンセル

  • 2017/04/11 21:48

    欲しい情報のところに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>

    キャンセル

  • 2017/04/12 15:53

    ご回答ありがとうございました。
    勉強不足のため、理解しきれていないため、似たような質問を上げるかもしれませんが、よろしくお願い致します。

    キャンセル

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16444questions

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

  • Java

    13803questions

    Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

  • HTML

    8988questions

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

  • jQuery

    6715questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。