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

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

ただいまの
回答率

88.04%

テーブルの行にあるチェックボックスの項目を他のテーブルにダブらず書き出したい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,372

score 14

表組の各行の最後にあるチェックボックスがあり、
チェックボックスをチェックし、データを取得するボタンをクリックすると、
チェックした行全体のデータを別のテーブルに書き出すといった内容のページを制作中です。

そこで現在別のテーブルに書き出すことまではできたのですが、
以下の内容がどうにもわかりませんでした。

・別のテーブルには同じデータを書き出させない(ダブらせない)
・別のテーブルにデータが書き出されている状態で、行のチェックボックスはチェックせず、データを取得するボタンをクリックした際、何も動作しない状態にしたい(現在アラートが出てしまいます)

HTML、CSSはそこそこわかるのですが、
JSに関しては初心者のため、簡単にわかるご説明をご教示いただければ幸いです。

function getTableRecords(){
        var chkRec=$("input[name='r_chk[]']:checked").parents("tr");
        if (chkRec.length == 0){
            alert('転送先を選択してください');return;
        }    
        else {
            var td1=[];
            var td2=[];
            var td3=[];
            for(i=0;i<chkRec.length;i++){
                var rec=chkRec[i];
                td1[i]=$(rec).children("td:nth-child(1)").html();
                td2[i]=$(rec).children("td:nth-child(2)").html();
                td3[i]=$(rec).children("td:nth-child(3)").html();
                //alert(td1[i]+','+td2[i]+','+td3[i]);
                $("#list tbody").prepend("<tr><td>"+td1[i]+"</td><td>"+td2[i]+"</td><td>"+td3[i]+"</td><td><input type='button' name='clear' value='除外></td></tr>");
            }
        }
    }
<table>
<tbody>
    <tr><td>値0-0</td><td>値0-1</td><td>値0-2</td><td><input type="checkbox" name="r_chk[]"/></td></tr>
    <tr><td>値1-0</td><td>値1-1</td><td>値1-2</td><td><input type="checkbox" name="r_chk[]"/></td></tr>
    <tr><td>値2-0</td><td>値2-1</td><td>値2-2</td><td><input type="checkbox" name="r_chk[]"/></td></tr>
    <tr><td>値3-0</td><td>値3-1</td><td>値3-2</td><td><input type="checkbox" name="r_chk[]"/></td></tr>
</tbody>
</table>
<button onClick="getTableRecords()">データ取得</button>
<table id="list">
<tbody>
</tbody>
</table>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+1

「除外」に伴い修正がありましたので、全文掲載しました。
ご確認ください。

var transferredRecords = {}; // 転送済みレコードオブジェクトの初期化

function getTableRecords() {
    var checkedRecords = $("input[name='r_chk[]']:checked").parents("tr");

    for (i = 0; i < checkedRecords.length; i++) {
        var rec = checkedRecords[i];

        var td1 = $(rec).children("td:nth-child(1)").html().toString();
        var td2 = $(rec).children("td:nth-child(2)").html().toString();
        var td3 = $(rec).children("td:nth-child(3)").html().toString();

        var recId = td1 + td2 + td3; // レコードを一意に識別するためのIdを生成

        if (recId in transferredRecords) {
            // レコードIdが転送済みレコードに含まれていればスキップ
            continue;
        }

         $("#list tbody")
             .prepend($('<tr />',    {id: recId})  // 修正
                 .append($('<td />').text(td1))
                 .append($('<td />').text(td2))
                 .append($('<td />').text(td3))
                 .append($('<td />')
                         .html($('<input />', {
                             type:    'button',
                             name:    'clear',
                             value:   '除外',
                             onclick: 'clearThisRecord(this);' // 修正
                         })
                     )
                 )
             );

         transferredRecords[recId] = true; // 転送済みレコードにレコードIdを追加
    }
}


function clearThisRecord(thisButton) {
    var thisRecord = $(thisButton).parent().parent();
    var recId = thisRecord.attr('id'); // <tr />からレコードIdを取得
    thisRecord.empty(); // 除外

    delete transferredRecords[recId]; // 転送済みレコードオブジェクトからレコードIdを削除
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/11 21:54

    ありがとうございます!
    感謝してもしきれないほど助かりました!
    また何かございましたら相談に乗っていただければ幸いです!

    キャンセル

+1

別のテーブルには同じデータを書き出させない(ダブらせない)

データ取得の度に#list tbodyを空にするのが簡単そうです。

別のテーブルにデータが書き出されている状態で、行のチェックボックスはチェックせず、データを取得するボタンをクリックした際、何も動作しない状態にしたい(現在アラートが出てしまいます)

alertを削除してreturnのみにします。

$(rec).children("td:nth-child(1)").html()

"<tr><td>"+td1[i]

文字列("<tr><td>")とオブジェクト(変数td1)を結合しようとしてうまく
いっていないようなので、toStringを足して文字列化しておく必要がありそうです。

"</td><td><input type='button' name='clear' value='除外></td></tr>"

除外のあとにシングルクォーテーションがひとつ足りないようです。

 コード

上記4点の修正でたぶんイメージどおりの動作になると思います。
以下が変更を加えたコードです。

function getTableRecords() {
  var chkRec = $("input[name='r_chk[]']:checked").parents("tr");
  if (chkRec.length == 0){
    return; // 変更
  }

  $("#list tbody").empty(); // 追加
  var td1=[];
  var td2=[];
  var td3=[];

  for(i=0;i<chkRec.length;i++){
    var rec=chkRec[i];
    td1[i]=$(rec).children("td:nth-child(1)").html().toString(); // 変更
    td2[i]=$(rec).children("td:nth-child(2)").html().toString();
    td3[i]=$(rec).children("td:nth-child(3)").html().toString();
    $("#list tbody").prepend("<tr><td>"+td1[i]+"</td><td>"+td2[i]+"</td><td>"+td3[i]+"</td><td><input type='button' name='clear' value='除外'></td></tr>"); // 変更
  }
}

 #list tbodyへの追加の別パターン

$("#list tbody").empty();
$(chkRec.clone()).each(function(i, tr){
  $("#list tbody").prepend(tr);
});
// 4列目を除外ボタンに書き換え
$("#list tr td:last-child").html('<input type="button" value="除外">');

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/11 11:41

    早々にご回答いただき大変感謝いたします!
    ご指摘いただいた通り修正したところ、
    ほぼこちらの期待通りのお答えをいただけました。
    もしこちらのソースで何かわからないことがございましたら、
    ご質問させていただければ幸いです。

    この度は誠にありがとうございました。

    キャンセル

+1

転送済みレコードをオブジェクトとして記憶する方法を考えてみました。

・DOM(HTML)要素の追加は、プラス(+)で連結するよりも、append()のメソッドチェーンやオブジェクトリテラルを使うことをお勧めします。括弧( )の対応などを間違えそうですが、ブラウザのデバッガがエラーを出してくれます。

・変数名は下手に縮約するよりもわかりやすい名前を付けることをお勧めします。

var transferredRecords = {}; // 転送済みレコードオブジェクトの初期化

function getTableRecords() {
    var checkedRecords = $("input[name='r_chk[]']:checked").parents("tr");

    for (i = 0; i < checkedRecords.length; i++) {
        var rec = checkedRecords[i];

        var td1 = $(rec).children("td:nth-child(1)").html().toString();
        var td2 = $(rec).children("td:nth-child(2)").html().toString();
        var td3 = $(rec).children("td:nth-child(3)").html().toString();

        var recId = td1 + td2 + td3; // レコードを一意に識別するためのIdを生成

        if (recId in transferredRecords) {
            // レコードIdが転送済みレコードに含まれていればスキップ
            continue;
        }

         $("#list tbody")
             .prepend($('<tr />')
                 .append($('<td />').text(td1))
                 .append($('<td />').text(td2))
                 .append($('<td />').text(td3))
                 .append($('<td />')
                         .html($('<input />', {
                             type:'button',
                             name:'clear',
                             value:'除外'
                         })
                     )
                 )
             );

         transferredRecords[recId] = true; // 転送済みレコードにレコードIdを追加
    }
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/11 11:16

    namomi3さま
    ご回答いただき大変感謝いたします。
    こちらの考えていた動作と、ほぼ完璧に一致いたしました。
    要素の書き方等のアドバイスまでいただき、今後の勉強に役立たせていただきます。

    またもう1点、こちらの質問にはなかったのですが、
    新たなテーブルに生成した「除外」のボタンですが、
    どうしても除外できずにおります。
    静的ページでは何とかなったのですが、
    もしよろしければ、ご教示いただければ幸いです。
    ご面倒をお掛けいたします。

    キャンセル

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

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

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