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

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

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

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

jQuery

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

5135閲覧

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

ryuuta

総合スコア14

JavaScript

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

jQuery

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

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/10/10 09:49

編集2016/10/10 10:53

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

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

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

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

javascript

1function getTableRecords(){ 2 var chkRec=$("input[name='r_chk[]']:checked").parents("tr"); 3 if (chkRec.length == 0){ 4 alert('転送先を選択してください');return; 5 } 6 else { 7 var td1=[]; 8 var td2=[]; 9 var td3=[]; 10 for(i=0;i<chkRec.length;i++){ 11 var rec=chkRec[i]; 12 td1[i]=$(rec).children("td:nth-child(1)").html(); 13 td2[i]=$(rec).children("td:nth-child(2)").html(); 14 td3[i]=$(rec).children("td:nth-child(3)").html(); 15 //alert(td1[i]+','+td2[i]+','+td3[i]); 16 $("#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>"); 17 } 18 } 19 }

HTML

1<table> 2<tbody> 3 <tr><td>値0-0</td><td>値0-1</td><td>値0-2</td><td><input type="checkbox" name="r_chk[]"/></td></tr> 4 <tr><td>値1-0</td><td>値1-1</td><td>値1-2</td><td><input type="checkbox" name="r_chk[]"/></td></tr> 5 <tr><td>値2-0</td><td>値2-1</td><td>値2-2</td><td><input type="checkbox" name="r_chk[]"/></td></tr> 6 <tr><td>値3-0</td><td>値3-1</td><td>値3-2</td><td><input type="checkbox" name="r_chk[]"/></td></tr> 7</tbody> 8</table> 9<button onClick="getTableRecords()">データ取得</button> 10<table id="list"> 11<tbody> 12</tbody> 13</table>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

JavaScript

1var transferredRecords = {}; // 転送済みレコードオブジェクトの初期化 2 3function getTableRecords() { 4 var checkedRecords = $("input[name='r_chk[]']:checked").parents("tr"); 5 6 for (i = 0; i < checkedRecords.length; i++) { 7 var rec = checkedRecords[i]; 8 9 var td1 = $(rec).children("td:nth-child(1)").html().toString(); 10 var td2 = $(rec).children("td:nth-child(2)").html().toString(); 11 var td3 = $(rec).children("td:nth-child(3)").html().toString(); 12 13 var recId = td1 + td2 + td3; // レコードを一意に識別するためのIdを生成 14 15 if (recId in transferredRecords) { 16 // レコードIdが転送済みレコードに含まれていればスキップ 17 continue; 18 } 19 20 $("#list tbody") 21 .prepend($('<tr />', {id: recId}) // 修正 22 .append($('<td />').text(td1)) 23 .append($('<td />').text(td2)) 24 .append($('<td />').text(td3)) 25 .append($('<td />') 26 .html($('<input />', { 27 type: 'button', 28 name: 'clear', 29 value: '除外', 30 onclick: 'clearThisRecord(this);' // 修正 31 }) 32 ) 33 ) 34 ); 35 36 transferredRecords[recId] = true; // 転送済みレコードにレコードIdを追加 37 } 38} 39 40 41function clearThisRecord(thisButton) { 42 var thisRecord = $(thisButton).parent().parent(); 43 var recId = thisRecord.attr('id'); // <tr />からレコードIdを取得 44 thisRecord.empty(); // 除外 45 46 delete transferredRecords[recId]; // 転送済みレコードオブジェクトからレコードIdを削除 47}

投稿2016/10/11 12:32

naomi3

総合スコア1105

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryuuta

2016/10/11 12:54

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

0

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

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

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

JavaScript

1var transferredRecords = {}; // 転送済みレコードオブジェクトの初期化 2 3function getTableRecords() { 4 var checkedRecords = $("input[name='r_chk[]']:checked").parents("tr"); 5 6 for (i = 0; i < checkedRecords.length; i++) { 7 var rec = checkedRecords[i]; 8 9 var td1 = $(rec).children("td:nth-child(1)").html().toString(); 10 var td2 = $(rec).children("td:nth-child(2)").html().toString(); 11 var td3 = $(rec).children("td:nth-child(3)").html().toString(); 12 13 var recId = td1 + td2 + td3; // レコードを一意に識別するためのIdを生成 14 15 if (recId in transferredRecords) { 16 // レコードIdが転送済みレコードに含まれていればスキップ 17 continue; 18 } 19 20 $("#list tbody") 21 .prepend($('<tr />') 22 .append($('<td />').text(td1)) 23 .append($('<td />').text(td2)) 24 .append($('<td />').text(td3)) 25 .append($('<td />') 26 .html($('<input />', { 27 type:'button', 28 name:'clear', 29 value:'除外' 30 }) 31 ) 32 ) 33 ); 34 35 transferredRecords[recId] = true; // 転送済みレコードにレコードIdを追加 36 } 37}

投稿2016/10/10 16:05

naomi3

総合スコア1105

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryuuta

2016/10/11 02:16

namomi3さま ご回答いただき大変感謝いたします。 こちらの考えていた動作と、ほぼ完璧に一致いたしました。 要素の書き方等のアドバイスまでいただき、今後の勉強に役立たせていただきます。 またもう1点、こちらの質問にはなかったのですが、 新たなテーブルに生成した「除外」のボタンですが、 どうしても除外できずにおります。 静的ページでは何とかなったのですが、 もしよろしければ、ご教示いただければ幸いです。 ご面倒をお掛けいたします。
guest

0

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

データ取得の度に#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点の修正でたぶんイメージどおりの動作になると思います。
以下が変更を加えたコードです。

javascript

1function getTableRecords() { 2 var chkRec = $("input[name='r_chk[]']:checked").parents("tr"); 3 if (chkRec.length == 0){ 4 return; // 変更 5 } 6 7 $("#list tbody").empty(); // 追加 8 var td1=[]; 9 var td2=[]; 10 var td3=[]; 11 12 for(i=0;i<chkRec.length;i++){ 13 var rec=chkRec[i]; 14 td1[i]=$(rec).children("td:nth-child(1)").html().toString(); // 変更 15 td2[i]=$(rec).children("td:nth-child(2)").html().toString(); 16 td3[i]=$(rec).children("td:nth-child(3)").html().toString(); 17 $("#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>"); // 変更 18 } 19}

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

javascript

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

投稿2016/10/10 12:45

編集2016/10/10 12:59
nnssn

総合スコア1221

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryuuta

2016/10/11 02:41

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問