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

Question

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

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

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

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>

Answer 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を削除
}

Comments

[ryuuta]

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

Answer 2

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

・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を追加
    }
}

Comments

[ryuuta]

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

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

Answer 3

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

データ取得の度に#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="除外">');

Comments

[ryuuta]

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

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