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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

CSS

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

Q&A

解決済

3回答

847閲覧

テキストエリアに入れた文字を表にセットする際、指定の背景色の場合は飛ばしてセットしたい。

masshima

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

CSS

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

0グッド

0クリップ

投稿2021/01/14 00:57

編集2021/01/14 02:13

前提・実現したいこと

お世話になります。初めて質問させていただきます。

JavaScriptで、テキストエリアに入れた文字を表テーブルの中にセットしたいです。
その際、表のセルの色がrgb(171,209,198)ならば、そのセルを飛ばして値をセットしたいのですがうまく行きません。

該当のソースコード

html

1<table id="app-table"> 2 <tr> 3 <td></td> 4 <td></td> 5 <td></td> 6 </tr> 7</table> 8 9<div> 10 <textarea id="nameArea"></textarea> 11 <button onclick="nameSet()" class="btn btn-outline-secondary btn-lg">名前セット</button> 12</div>

css

1#app-table tr td:hover { 2 background-color: rgb(171, 209, 198); 3}

JavaScript

1//名前格納用配列 2var tableArray = []; 3 4/* テキストエリアの名前を表にセット */ 5function nameSet(){ 6 var tdElem = $('table#app-table td'); 7 /* td要素を配列に取得 */ 8 tdElem.each (function() { 9 tableArray.push($(this).html()); 10 }); 11 //テキストエリアの値を配列namesに格納 12 var name = document.getElementById('nameArea').value; 13 var names = name.split('\n'); 14 var n = tableArray.length; 15 if(names.length > tableArray.length){ 16 alert('テキストエリアに入力した人数がセル数を上回っています。'); 17 }else{ 18 for(var i = 0; i < n; i ++){ 19 tableArray[i] = names[i]; 20 } 21 /* td要素に配列の値を戻す */ 22 tdElem.each (function(i) { 23 if($(this).css('background-color') == 'rgb(171,209,198)'){ 24 continue; 25 } 26 $(this).html(tableArray[i]); 27 i++; 28 }); 29 } 30} 31 32//クリックで色変更。ホバー時の色変更はcssで実行 33$('table#app-table td').bind('click', function(e) { 34 $(e.currentTarget).css('background-color','rgb(171,209,198)'); 35})

試したこと

まず、表のセルの色を変更するのに、

JavaScript

1//クリックで色変更。ホバー時の色変更はcssで実行 2$('table#app-table td').bind('click', function(e) { 3 $(e.currentTarget).css('background-color','rgb(171,209,198)'); 4})

というコードを用意しました。

その後、値をセットするのですが、

JavaScript

1 /* td要素に配列の値を戻す */ 2 tdElem.each (function(i) { 3 if($(this).css('background-color') == 'rgb(171,209,198)'){ 4 continue; 5 } 6 $(this).html(tableArray[i]); 7 i++; 8 });

このコードの、

JavaScript

1 if($(this).css('background-color') == 'rgb(171,209,198)'){ 2 continue; 3 }

を記述したところ、クリックしても背景色が変わらなくなってしまいました。
nameSet()のなかに入れたコードが他のコードにも影響するのはなぜでしょうか...?
最近プログラミングの勉強を始めて、アウトプットとして作成しています。

説明が分かりづらかったら申し訳ございません。
どうかお力をお貸しいただけませんでしょうか。
どうぞよろしくお願いいたします。

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

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

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

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

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

masshima

2021/01/14 02:05

以後気をつけます。ありがとうございます。
guest

回答3

0

continue 文は、ループの中で使ってください。文法エラーになります。
continue - JavaScript | MDN

この場合は、return 文でいいのではないでしょうか。

投稿2021/01/14 01:24

Lhankor_Mhy

総合スコア35871

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

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

masshima

2021/01/14 02:05

初めて知りました。 ありがとうございます!
guest

0

開発者ツールのコンソールにエラーが出ていませんか?

javascript

1/* td要素に配列の値を戻す */ 2tdElem.each(function(i) { 3 if ($(this).css('background-color') == 'rgb(171,209,198)') { 4 continue; 5 } 6 $(this).html(tableArray[i]); 7 i++; 8});

forwhile の中ではないので、continue は使えません。jQuery の each() では return true と書きます。

javascript

1 if ($(this).css('background-color') == 'rgb(171,209,198)') { 2 return true; 3 }

投稿2021/01/14 01:18

int32_t

総合スコア20672

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

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

masshima

2021/01/14 02:02

ありがとうございます! continueは使えないのですね。勉強になりました。
guest

0

ベストアンサー

表のセルの色がrgb(171,209,198)

これは特定のクラスをつけるなどしてそのクラスの有無で
ジャッジするのが妥当です。

投稿2021/01/14 01:14

yambejp

総合スコア114585

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

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

masshima

2021/01/14 02:05

回答ありがとうございます。 //クリックでいろ変更ホバー時の色変更はcssで実行 $('table#app-table td').bind('click', function(e) { $(e.currentTarget).css('background-color','rgb(171,209,198)'); }) これではなく、クラスをつけるということでしょうか...? クリックした時、クラスをつけて色を変える→そのクラスがあるなら代入を飛ばすという流れでしょうか。
masshima

2021/01/14 02:35

/* td要素に配列の値を戻す */ tdElem.each (function(i) { if($(this).hasClass('clickedTd')){ return true; } $(this).html(tableArray[i]); i++; }); とすることで、思った通りの処理が実現できました! ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問